https://sideprojects.net에서 jQuery를 사용하여 무한 스크롤을 구현하는 방법과 다른 사이트에 적용할 수 있는 방법을 공유해야겠다고 생각했습니다.

우리의 경우 페이지 매김은 지난 4일 동안의 콘텐츠를 표시하기 위해 페이지 하단에 도달할 때마다 "다음 날 로드"버튼을 클릭해야 하는 "추가 로드"형식입니다.



우리가 원했던 것은 페이지 하단으로 스크롤하자마자 다음 며칠을 표시하는 것이었고 이 자습서에서 다룰 내용입니다.

설정

전제 조건

일종의 페이지 매기기가 있는 웹 사이트입니다.

아직 추가하지 않은 경우 웹 사이트에 jQuery를 추가하십시오.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

아직 없는 경우 사이트의 페이지 매김을 제어하는 ​​버튼에 클래스를 추가하십시오.

1) 윈도우 스크롤 이벤트 생성

//Infinite scroll
$(window).on("scroll", function() {

});

2) 전체 문서의 높이에 대한 변수와 스크롤 위치를 결정하는 변수를 만듭니다.

scroll 이벤트 내부에 2개의 변수를 생성합니다. 우리는 그것들을 scrollHeight와 scrollPos라고 부를 것입니다.

var scrollHeight = $(document).height();
var scrollPos = $(window).height() + $(window).scrollTop();

3) 수학을 해보자!

기억하세요: 사용자가 페이지 하단으로 스크롤할 때마다 이벤트가 발생하기를 원합니다.

다음 조건문을 사용하여 페이지 하단에 도달했는지 확인할 수 있습니다.

if ((scrollHeight - scrollPos) / scrollHeight == 0) {

조건문이 충족되면 이벤트가 트리거되기를 원합니다.

이 경우 버튼의 클래스 이름은 .load-more-days-button입니다. 해당 버튼은 페이지 끝에 도달하면 클릭됩니다.

if ((scrollHeight - scrollPos) / scrollHeight == 0) {             
   $('.load-more-days-button').click();
}

따라서 모두 합치면 다음을 얻습니다.

//Infinite scroll
$(window).on("scroll", function() {
  var scrollHeight = $(document).height();
  var scrollPos = $(window).height() + $(window).scrollTop();
  if ((scrollHeight - scrollPos) / scrollHeight == 0) {
    $('.load-more-days-button').click();
    console.log("bottom!");
  }
});

그게 다야? 끝났어?!? 음 — 예, 하지만 아니요.

효과가있다.

하지만 좋지 않습니다. 왜요?

이벤트를 시작하기 전에 스크롤바가 끝까지 닿도록 끝까지 스크롤해야 합니다.

모바일에서 제대로 작동하지 않습니다. 모바일에서 항상 실행되는 것은 아니며 스크롤을 끝까지 내려도 페이지 하단에 도달했다는 사실을 인식하지 못합니다.

이제 문제를 해결해 보겠습니다.

이 줄을 대체해 보겠습니다.

if ((scrollHeight - scrollPos) / scrollHeight == 0) {

대신:

if(((scrollHeight - 300) >= scrollPos) / scrollHeight == 0) {

이 코드 줄은 스크롤 이벤트가 페이지 하단에서 300픽셀(또는 그 미만)일 때 트리거되도록 합니다. (원한다면 300을 다른 것으로 구성할 수 있습니다)

이것은 데스크탑과 모바일에서 훌륭하게 작동합니다!

마무리

모든 것을 종합하면 코드는 다음과 같이 보일 것입니다.

//Infinite Scroll
$(window).on("scroll", function() {
 //page height
 var scrollHeight = $(document).height();
 //scroll position
 var scrollPos = $(window).height() + $(window).scrollTop();
 // fire if the scroll position is 300 pixels above the bottom of the page
 if(((scrollHeight - 300) >= scrollPos) / scrollHeight == 0){
   $('.load-more-days-button').click();
  }
});

실제 예here를 볼 수 있습니다.