JavaScript 스크롤 끝점 만들기

웹 페이지에서 지연 로딩을 구현하기 위해 온라인에서 사용할 수 있는 플러그인이 너무 많습니다. 그러나 페이지의 일정량을 스크롤한 후에만 콜백 함수를 트리거합니다. 스크롤바가 페이지 끝에 도달하면 콜백 함수를 호출할 수 있습니다. 그러한 플러그인을 온라인에서 사용할 수 있지만 나는 그들에게 알려지지 않았고 항상 처음부터 무언가를 만드는 것을 좋아합니다. 이제 우리만의 스크롤 종료 지점을 만들어 봅시다.

1. 먼저 HTML(index.html)과 js(script.js) 파일을 생성합니다.

2. 이제 주어진 CSS를 HTML 파일의 'head' 태그에 붙여넣고 js 파일을 HTML과 연결합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll ending point with JavaScript</title>

    <style>
      *{
        margin: 0;
        padding: 0;
      }

      body{
        height: 200vh;
      }
    </style>
  </head>

  <body>

    <script src="script.js"></script>
  </body>
</html>

const selector = el=>document.querySelector(el);
const body = selector('body');

4. 이제 스크롤 이벤트를 만들 차례입니다. 스크롤 이벤트의 코드는 다음과 같습니다.

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y;
  if(scrollLimitLeft===0)console.log('End of the scroll');
});

5. 우리는 우리가 원하는 것을 달성했고 우리의 코드는 지금도 원활하게 실행되고 있습니다. 그러나 우리 코드에는 작은 버그가 숨어 있습니다. HTML 파일에서 CSS 재설정 코드( *{margin: 0; padding: 0;} ) 를 제거하면 코드 작동이 중지됩니다 . 이제 페이지 하단에 스크롤되는 " scrollLimitLeft" 변수 의 값이 표시되면 값은 -16이 됩니다(이 값은 브라우저마다 다를 수 있음). 우리의 js 코드가 한 줄의 CSS 코드의 존재를 기반으로 작동할 것이라고 생각하는 저처럼 속상하실 수도 있습니다. 그러나 걱정하지 말고 계속 읽으면 해결책을 얻을 수 있습니다.

6. 먼저 왜 이런 일이 일어나는지 알아야 합니다. 실제로 HTML은 "본문" 태그에 기본 여백이 있으며 스크롤할 추가 공간을 만듭니다. 결과적으로 페이지 하단에 '0'이 아닌 부정적인 결과가 표시됩니다. 따라서 코드를 다시 작동시키려면 " scrollLimitLeft " 에서 추가 여백을 빼야 합니다 . 그럼 여분의 마진을 알아봅시다.

7. 3절의 코드 뒤에 주어진 코드를 적는다.

const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

이 작은 프로젝트에 대해 어떻게 생각하세요? 마음에 드셨다면 박수를 쳐주시고 프로젝트에서 실수를 발견하거나 제안할 사항이 있으면 댓글 섹션에 알려주세요.