jQuery 또는 기본 js를 사용하여 마우스 스크롤을 구현하여 page_jquery에 새 데이터를 로드합니다.

많은 사람들이 폭포 흐름 이미지 레이아웃을 본 적이 있을 것입니다. 해당 이미지는 동적으로 로드되며 서버에 대한 부담은 상대적으로 적습니다. : qq 스페이스를 입력하고 스페이스를 끌어내린 후 맨 아래에 도달하면 나머지 댓글이나 로그가 동적으로 로드됩니다. 오늘은 js를 사용하여 구현 아이디어와 동적 로딩을 제어하는 ​​코드를 살펴보겠습니다.

다음 코드는 사진 로딩이든, 기록 데이터 로딩이든, 스크롤바를 아래로 당겼을 때의 로딩 이벤트를 주로 제어합니다.

jQuery 라이브러리를 로드한 후 다음과 같이 사용할 수 있습니다.

 $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {

   //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);

    }
  });

분석:

스크롤 막대가 아래쪽에 도달했는지 확인하려면 DOM의 세 가지 속성 값인 scrollTop, clientHeight 및 scrollHeight를 사용해야 합니다.

• scrollTop은 Y축 스크롤 막대의 스크롤 거리입니다.
• clientHeight는 콘텐츠 표시 영역의 높이입니다.
• ScrollHeight는 콘텐츠의 표시 영역 높이에 오버플로(스크롤) 거리를 더한 값입니다.

이 세 가지 속성의 소개에서 볼 수 있듯이 스크롤바가 하단에 도달하는 조건은 scrollTop + clientHeight == scrollHeight입니다.

순수 js에서는 다음과 같이 할 수 있습니다:

window.onscroll = function() { 
   var scrollTop = document.body.scrollTop; 
   var offsetHeight = document.body.offsetHeight; 
   var scrollHeight = document.body.scrollHeight; 
   if (scrollTop == scrollHeight - offsetHeight) { 
    page++; 
    loadList(page); 
   } 
  }; 
 
 
function loadList(page) { 
   page = page || 1; 
 
   if (isLoad) { 
    getJSON('/forum.php?mod=hot&page=' + page).then(function(data) { 
     if (data.code == 200) { 
      data = data.data; 
      if (data && Object.keys(data).length > 0) { 
       for (var k in data) { 
        var v = data[k]; 
        detailTemplate = detailTemplate.cloneNode(true); 
        var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; 
        userInfoObj.getElementsByClassName('name')[0].innerText = v.author; 
        userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; 
        userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; 
        detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; 
        detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; 
        var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; 
        extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; 
        extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; 
        postListObj.appendChild(detailTemplate); 
       } 
      } else { 
       isLoad = false; 
      } 
     } else { 
      isLoad = false; 
     } 
    }, function(status) { 
     console.log('Something went wrong, status is ' + status); 
    }); 
   } 
  }