美文网首页
js判断滚动到底或滚动到顶

js判断滚动到底或滚动到顶

作者: 十一点后不在线 | 来源:发表于2022-06-07 10:45 被阅读0次
    scrollTop:滚动条滚动时,滚动条上端距离顶部的距离
    clientHeight:可视区的高度
    scrollHeight:滚动条的总高度(当前可滚动的页面的总高度)
    
    window.addEventListener('scroll', scroll)
    
    function scroll() {
          const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
          const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
          const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    
          if (scrollTop === 0) {
            console.log('滚动到顶了');
          }
    
          if (scrollTop + clientHeight >= scrollHeight) {
            console.log('滚动到底了');
          }
    
    }
    
    window.removeEventListener('scroll', scroll) // 移除滚动事件
    
    

    在部分浏览器上,到底部时,触发不了
    可以考虑:
    1.用offsetHeight代替clientHeight ,多计算边框的距离
    2.scrollTop的实时监听值可能是小数,采用Math.ceil(scrollTop),向上取整,避免少那个零点几的距离

    相关文章

      网友评论

          本文标题:js判断滚动到底或滚动到顶

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