DOM元素 onScrollToBottom监听示例

最新推荐文章于 2025-01-07 22:43:51 发布

最新推荐文章于 2025-01-07 22:43:51 发布 · 993 阅读

文章标签：

#js #scroll #bottom #html #ViewUI

JS 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种在网页中检测滚动条是否到达底部的方法，并提供了一个JavaScript实现示例。该方法通过为指定元素添加滚动监听事件，当检测到滚动位置接近元素的底部时触发回调函数。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>下拉滚动条滚到底部了吗？</title>
<body>
<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
    <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
</div>
<script>
    HTMLElement.prototype.onScrollToBottom = function (callback) {
        var _ele = document.querySelector("#div1");
        if(_ele){
            this.onscroll = function(e){
                if(this.scrollTop + this.offsetHeight >= this.scrollHeight){
                    if(typeof callback == "function"){
                        callback();
                    }
                }
                return false;
            };
        }
    }
    document.querySelector("#div1").onScrollToBottom(function (e) {
        alert("dao di le ");
    })
</script>
</body>
</html>