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

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判断滚动到底或滚动到顶)