jQuery 또는 기본 js를 사용하여 마우스 스크롤을 구현하여 page_jquery에 새 데이터를 로드합니다.-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 15:11:57

원래의

2001명이 탐색했습니다.

많은 사람들이 폭포 흐름 이미지 레이아웃을 본 적이 있을 것입니다. 해당 이미지는 동적으로 로드되며 서버에 대한 부담은 상대적으로 적습니다. : 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&#63;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); 
    }); 
   } 
  }

로그인 후 복사