스크롤 막대를 아래로 당길 때 더 많은 페이지를 로드하도록 js를 구현하는 방법(코드 첨부)

不言

풀어 주다： 2018-08-31 10:53:30

원래의

4945명이 탐색했습니다.

이 글의 내용은 스크롤바를 눌렀을 때 더 많은 페이지를 로드할 수 있도록 js를 구현하는 방법에 대한 내용입니다.(코드 포함) 도움이 필요한 친구들이 참고하시면 좋을 것 같습니다. .

휴대폰에서는 데이터 목록 페이징을 아래쪽으로 끌어내리면 더 많이 로드됩니다. 그런데 지난해 3월 웹페이지도 끌어내려야 더 많이 로드해야 한다는 고객 요청이 있어서 저희는 스크롤 막대를 아래로 내리면 더 많은 콘텐츠를 로드할 수 있습니다. (개인 프로젝트 경험) 기사의 코드는 다음과 같이 매우 간단합니다.

var totalPages;//总页数
var pageno = 0;//当前页数
$(function(){
    $(window).scroll(function() {
       var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
       var positionValue = (scrollTop + windowHeight) - scrollHeight;
       if (positionValue == 0) {
           //do something
           if (pageno < totalPages - 1) {
               pageno++;
               doSomething(pageno);
           } else {
               alert('没有更多了');
           }
       }
   });
);
 
function doSomething(pageno) {
        var url = "*******";//分页列表的接口
        var data = {
                size: 5,
                start: pageno,
        };
        $.getJSON(url, data, function (rtn) {
                
        });
}

로그인 후 복사

테스터는 브라우저를 확대하거나 화면 표시를 확대/축소로 설정하면 다운로드할 수 없는 것을 발견했습니다. 1년이 넘게 지나니 정말 대단하네요@_@

디버깅한 결과 확대/축소 시 positionValue 값이 0이 될 수 없고 계속해서 더 로드할 수 없다는 것을 발견했습니다. Pull-Down Loading More DEMO(js 구현) 기사에서 언급했듯이: positionValue的值就无法等于0了，没法继续加载更多了，这时看到一篇文章下拉加载更多DEMO(js实现)中讲到：

如果等滚动条拉到底部时再加载，会影响用户体验。因为一般动态加载的时候都需要向服务端请求资源，这时需要时间。一个更佳的方式是，当滚动条距离底部一定距离（C）时，就动态加载更多，向服务端请求资源。也就是预加载，预读取。公式如下
this.scrollHeight - C == $(this).scrollTop() + $(this).height()

看完后收到启发，于是将positionValue的值设为大于等于-10，这里的10也就是滚动条距离底部一定距离（C）的值。
果然，没问题了，有缩放时也可以正常实现下拉加载。

于是，记录下来，分享给大家，共勉。

另外提醒一点，$(window).scroll(function()监听滚动事件不执行这个问题中的采纳答案提到：

html,body的高度样式如果设置为100%，$(window).scroll方法将检测不到正确的滚出高度（0），导致滚动监听事件失效，设置html,body{ height:auto }로드하기 전에 스크롤 막대가 맨 아래에 도달할 때까지 기다리면 사용자 경험에 영향을 미칩니다. 일반적으로 동적으로 로드할 때는 서버에서 리소스를 요청해야 하기 때문에 시간이 걸립니다. 더 좋은 방법은 스크롤 막대가 하단에서 특정 거리(C)에 있을 때 동적으로 더 많은 것을 로드하고 서버에 리소스를 요청하는 것입니다. 즉, 미리 로드하고 미리 읽는 것입니다. 수식은 다음과 같습니다

this.scrollHeight - C == $(this).scrollTop() + $(this).height()

이 글을 읽고 영감을 받아서 positionValue 값을 크거나 같게 설정했습니다. -10, 여기서는 10 즉, 스크롤 바와 하단 사이의 특정 거리(C) 값입니다.

물론 문제는 없습니다. 줌을 해도 정상적으로 풀다운 로딩이 가능합니다.

그러니까 녹음해서 모두와 공유하고 서로 격려해주세요. 또 다른 알림인 $(window).scroll(function()은 스크롤 이벤트를 수신하고 실행되지 않습니다. 이 질문에 채택된 답변은 다음과 같습니다.
html, 본문의 높이 스타일이 100%로 설정된 경우 $(window) .scroll 메소드는 올바른 스크롤 높이(0)를 감지하지 못하므로 스크롤 수신 이벤트가 실패하게 됩니다. html,body{ height:auto}를 설정하면 문제를 해결할 수 있습니다. 관련 권장 사항:

jQuery는 아래로 스크롤하여 폭포 흐름 효과를 달성하고, jquery는 아래로 스크롤하여

🎜🎜js를 구현하여 페이지 하단으로 스크롤하여 loading_javascript 기술을 계속합니다. 🎜🎜🎜

위 내용은 스크롤 막대를 아래로 당길 때 더 많은 페이지를 로드하도록 js를 구현하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!