scroll家族之scrollTop

最新推荐文章于 2023-03-24 17:04:49 发布

原创最新推荐文章于 2023-03-24 17:04:49 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scrollTop #javascript #前端

前端同时被 2 个专栏收录

42 篇文章

订阅专栏

javascript

40 篇文章

订阅专栏

本文介绍如何在不同浏览器中兼容地获取网页的滚动距离（scrollTop），包括对于是否声明DOCTYPE的情况给出相应的解决方案，并提供了一个封装好的JavaScript函数。

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

scrollTop 被卷去的头部(它就是当你滑动滚轮浏览网页时网页隐藏在屏幕上方的距离)
如何得到scrollTop:
DTD:即html文件开头的<!DOCTYPE html>
未声明DTD:
document.body.scrollTop;//edge,chrome,firefox
document.documentElement.scrollTop;//仅ie支持
window.pageYoffset;//edge,chrome,firefox
声明DTD：
document.body.scrollTop;//edge
document.documentElement.scrollTop;//ie6+,chrome,firefox,edge不支持
window.pageYoffset;//ie9+,chrome,firefox,edge

兼容写法：
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scroll;

上述代码在ie6+,firefox61,chrome68检测

封装scrollTop:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装scrollTop</title>
    <style>
        body {
            height: 2000px;
        }
    </style>
</head>
<body>
</body>
<script>
    function scroll(){
        if(window.pageYOffset != null){
            //ie9+和各种最新浏览器，注意：为什么使用！=null,因为加载完页面pageYOffset就是0
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }else if(document.compatMode == "CSS1Compat"){
            //不是怪异模式(即声明了DTD)
            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }else{
            //怪异模式(未声明DTD)
            return {
                left: document.body.scrollLeft,
                top: document.body.scrollTop
            }
        }
    }
    window.onscroll = function(){
        console.log(scroll().top);//在控制台打印出scrollTop
    }
</script>
</html>