美文网首页
滚动监听

滚动监听

作者: 随风飞2019 | 来源:发表于2020-10-06 09:59 被阅读0次
function getScrollTop() {
    var scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
      scrollTop = document.documentElement.scrollTop;
    } else if (document.body) {
      scrollTop = document.body.scrollTop;
    }
    return scrollTop;
  }

  // 获取当前可视范围的高度
  function getClientHeight() {
    var clientHeight = 0;
    if (document.body.clientHeight && document.documentElement.clientHeight) {
      clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
    } else {
      clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
    }
    return clientHeight;
  }

  // 获取文档完整的高度
  function getScrollHeight() {
    return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  }

  $(document).scroll(function () {
    if (getScrollHeight() - (getScrollTop() + getClientHeight()) > 0) {
      if(currentPage<totalPage){
      currentPage++
      await showHtml()
      }else{
      $(".hasnomore").show()
      }
   }
 })
// 这种写法也存在0.00几的问题,建议下面简单方法
// 在jquery里写,可以更简单
const loadMoreData =async function(){
  let scrollTop = $(this).scrollTop()
  let scrollHeight = $(document).height()
  let windowHeight = $(this).height()
  if(scrollTop>0 && scrollTop + windowHeight+1 >= scrollHeight ){
    if(currentPage<totalPage){
      currentPage++
      await showHtml()
    }else{
      $(".hasnomore").show()
    }
  }
}

init里面监听滚动$(window).scroll(loadMoreData)

滚动到顶部
window.scroll(0, 0);

相关文章

网友评论

      本文标题:滚动监听

      本文链接:https://www.haomeiwen.com/subject/bozzuktx.html