페이지 끝까지 자동 스크롤 내리기 Javascript

오늘은 자동 스크롤 내리기에 대해서 알아 봅니다. 유튜브나 긴 페이지를 마우스로 계속 내려가면서 스크롤 하는 것이 귀찮아서 코드를 하나 만들었습니다.

`document.documentElement.scrollTop` 의 값은 현재 문서의 최상단의 위치 값입니다. 처음 페이지를 열면 0이 그 값입니다.

`document.documentElement.scrollHeight`의 값은 현재 문서의 최하단의 위치 값입니다. 만약 스크롤을 아래로 내리면 이 값은 점점 더 커지게 됩니다.

그렇다면 아래로 스크롤을 내리는 코드의 핵심은 최상단의 위치 값에 최하단의 위치값을 강제로 할당 주면 아래로 자동으로 내려가게 됩니다.

크롬 브라우저의 콘솔 창에서 아래의 코드를 입력해보면 자동으로 스크롤이 내려가는 것을 볼 수 있습니다.

//콘솔창 붙여넣고 엔터해보세요
document.documentElement.scrollTop = document.documentElement.scrollHeight;

그런데 달랑 한번 만 내려가고 끝입니다. 우리가 원하는 것은 해당 페이지가 계속 자동으로 스크롤 되면서 끝까지 내려가야 하는 것입니다.

그리고 끝까지 내려가면 더 이상 이 코드가 실행되지 않고 끝나야 합니다.

setInterval(함수,밀리초) 이용 자동 스크롤

끝을 모르는데 계속 뭔가를 실행하는 것으로는 setInterval(할일, 밀리초)를 이용하면 됩니다. ‘밀리초’ 만큼의 시간 마다 계속 ‘할일’을 실행하는 구조 입니다.

하지만 끝에 다다르면 끝내야 하므로 ‘할일’ 안에서 if~else 문을 사용해서 끝내는 조건을 달아줘야 합니다.

반복을 끝내는 조건 : 최하단의 바닥 위치를 setInterval 함수가 실행될 때마다 외부 변수에 저장해 두고 스크롤이 진행되면서 값이 커진 최하단의 위치값과 계속 비교합니다. 그러다 끝에 다다르면 변수에 저장해둔 값과 실제 스크롤 되면서 늘어난 값이 같아지게 됩니다. 이것이 같아지면 끝내는 조건입니다.

//🍎 0.5초 마다 스크롤해서 페이지 끝까지 자동 스크롤 하는 Javascript

let currentHeight = 0; // 이것 함수 안에 있으면 제대로 작동 안함!!

var scrollInterval = setInterval(function() {
  let pageBottom = document.documentElement.scrollHeight;

  if(currentHeight < pageBottom) {
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
    currentHeight = pageBottom;
    console.log(`스크롤 중 현재 바닥 위치 : ${currentHeight}`);
  } else {
    clearInterval(scrollInterval);
    console.log(`스크롤을 끝냈습니다. currentHeight 값 ${currentHeight}, pageBottom 값 ${pageBottom}`)
  }
}, 500);

위의 코드를 브라우저의 콘솔 창에 입력하고 엔터를 치면 바닥까지 스크롤하고 멈출 것입니다. 자바스크립트를 배우는 단계이니까 좀 허접한 코드이니 양해를 바랍니다.