JS实现界面有滚动条，滚动到最底部时候触发事件

最新推荐文章于 2022-11-21 17:02:26 发布

looper.zhuo

最新推荐文章于 2022-11-21 17:02:26 发布

阅读量1.2k

点赞数 1

分类专栏： JAVASCRIPT VS TYPESCRIPT 文章标签： javascript window dom

本文链接：https://blog.csdn.net/qq_40677590/article/details/107183718

版权

JAVASCRIPT VS TYPESCRIPT 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

代码实现：

JS：

window.onscroll = function () {
    //变量scrollTop是滚动条滚动时，距离顶部的距离，兼容ie
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //变量windowHeight是可视区的高度，兼容ie
    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //变量scrollHeight是滚动条的总高度，兼容ie
    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    //滚动条到底部的条件，兼容ie
    if (scrollTop + windowHeight === scrollHeight) {
       console.log('已经下拉到底部啦！')
       console.log('界面的总高度为:'+scrollHeight+',可视窗口的高度为:'+windowHeight+',滚动条距离顶部的高度为:'+scrollTop)
    }
}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
         #div{
          height: 2000px;
          background-color: aqua;
         }  
        </style>
    </head>
<body>
    <h2>我的第一张网页</h2>
    <p>我的第一个段落。</p>
    <p id="demo"></p>
    <p name="demo"></p>
    <div id='div'>div</div>
    <script src="print-demo.js">
    </script>
</body>
</html>

简单明了

looper.zhuo

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS实现界面有滚动条，滚动到最底部时候触发事件

代码实现：JS：window.onscroll = function () { //变量scrollTop是滚动条滚动时，距离顶部的距离，兼容ie var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度，兼容ie var windowHeight = document.documentElement.clientHei
复制链接

扫一扫