[JavaScript] Div Autoscroll : 오른쪽으로 자동 스크롤하기 / 페이지 로드할 때 스크롤 위치 설정하기

jquery를 이용해서 div 객체를 자동 스크롤할 수 있다. 페이지 로드 시에 자동으로 작동한다.

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script type="text/javascript">

    const container = document.getElementById('container');
    const containerScrollWidth = container.scrollWidth;

    window.addEventListener('load', () => {
        self.setInterval(() => {
            if (container.scrollLeft !== containerScrollWidth) {
                container.scrollTo(container.scrollLeft + 1, 0);
            }
        }, 15);
    });

getElementById 를 이용해서 컨테이너를 잡고 window.addEventListener 를 이용해서 페이지 로드시에 작동하도록 한다.
그리고 setInterval 함수를 이용해서 15ms 마다 스크롤이 오른쪽 끝까지 갈 때까지 스크롤의 위치를 증가시킨다.

자동 스크롤은 끝

페이지 시작 시에 스크롤 이동하기

위처럼 하면 자동 스크롤은 완성되는데, 문제는 setInterval 때문에 스크롤을 왼쪽으로 움직여도 계속 오른쪽으로 이동한다. 내가 원했던 건 스크롤이 끝까지 간 뒤에 작동을 정지하는 것이었기 때문에 방법을 찾아보았다.

원래 생각은 setTimeout 와 clearInterval 을 이용해서 스크롤이 끝까지 간 후에 setInterval 함수의 작동을 정지시키는 것이었는데, 생각보다 잘 되지 않았다.

그래서 그냥 setInterval 을 이용하지 않고 스크롤 위치를 끝까지 이동시켜 버렸다.

    window.addEventListener('load', () => {
        if (container.scrollLeft !== containerScrollWidth) {
            container.scrollTo(container.scrollLeft + 10000, 0);
        }
    });

스크롤 위치를 10000 이동시켜 버려서 끝까지 가도록 했다. 완성