Web前端之路

JS监听是否滚动到底部

2021-01-26  本文已影响0人  学习前端ing

练习项目时需要实现滚动到指定位置然后加载更多,

主要实现方法是用滚动条距顶部高度+可视区高度与滚动条总高度进行比较。

直接放代码吧

window.onscroll = function(){
  //scrollTop是滚动条滚动时,距离顶部的距离
  var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
  //windowHeight是可视区的高度
  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  //scrollHeight是滚动条的总高度
  var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
  //滚动条到底部的条件
  if(scrollTop+windowHeight == scrollHeight){
    //到了这个就可以进行业务逻辑加载后台数据了
    console.log("到了底部");
    // window.onscroll = '' 用于解除绑定
  }   
}

上面是实现了当滚动条滑到最底部时触发函数,可以根据需求更改条件来触发函数。

以上为本人对项目中遇到问题的一些见解,如有错误请指出,感谢您的观看。

上一篇 下一篇

猜你喜欢

热点阅读