美文网首页
滚动监听

滚动监听

作者: 随风飞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