普通元素绑定scroll滚动方法

最新推荐文章于 2022-11-27 15:49:22 发布

原创最新推荐文章于 2022-11-27 15:49:22 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#元素滚动 #前端

本文介绍如何使用原生JS实现对滚动事件的监听，包括如何判断滚动条是否到达底部或顶部，以及如何设置滚动元素的位置。适用于div、table等普通元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

普通元素添加scroll的问题，以原生js为例

scroll方法要加在外层视窗元素上，即那个限制了滚动区域的元素上
不要加在里层的用来滚动的元素上，那样不会生效！
普通div，table，都可以使用scroll。当然，window的scroll方法是最常用的

// 给layui的table增加下拉到底部的判断
document.getElementsByClassName("layui-table-body")[0].onscroll = function(){
    var scrollTop = this.scrollTop,//页面上卷的高度
        wholeHeight = this.scrollHeight,//页面底部到顶部的距离
        divHeight = this.clientHeight;//页面可视区域的高度
    // 到底部
    if(scrollTop + divHeight >= wholeHeight){
        // do
    }
    //到顶部
    if(scrollTop==0){
        // do
    }
}
// 设置滚动元素的y轴位置
document.getElementsByClassName("layui-table-body")[0].scrollTop = 600;