欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DOM元素 onScrollToBottom监听示例

程序员文章站 2022-03-31 20:37:00
...
<!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>