美文网首页Web前端之路
JS监听是否滚动到底部

JS监听是否滚动到底部

作者: 学习前端ing | 来源:发表于2021-01-26 19:29 被阅读0次

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

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

直接放代码吧

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 = '' 用于解除绑定
  }   
}

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

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

相关文章

网友评论

    本文标题:JS监听是否滚动到底部

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