检测页面滚动到底部

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了检测页面滚动到底部相关的知识,希望对你有一定的参考价值。

原理是:

滚动高度 + 页面高度 = 页面滚动总高度

代码如下:

//文档的总高度
function getScrollHeight(){
  var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if(document.body){
    bodyScrollHeight = document.body.scrollHeight;
  }
  if(document.documentElement){
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
}
//浏览器视口的高度
function getWindowHeight(){
  var windowHeight = 0;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
}
$(window).on(‘scroll‘, function(){
    if ($(this).scrollTop() + getWindowHeight() == getScrollHeight()) {
        $(‘#cardLoader‘).show();
        $(window).off(‘scroll‘);
    }
});

 

以上是关于检测页面滚动到底部的主要内容,如果未能解决你的问题,请参考以下文章

检测 UITableView 何时滚动到底部

页面滚动到底部自动 Ajax 获取文章

在 WebBrowser 控件中检测滚动到底部

React 滚动到底部仅适用于第一次(内部演示)

JS监听页面滚动到底部事件

jquery让页面滚动到底部