JavaScript 获取ScrollTop/ScrollLeft的函数封装

最新推荐文章于 2023-07-12 13:16:30 发布

houyanhua1

最新推荐文章于 2023-07-12 13:16:30 发布

阅读量936

点赞数

分类专栏： JavaScript 文章标签： javascript scroll

本文链接：https://blog.csdn.net/houyanhua1/article/details/79571801

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

ScrollTop/ScrollLeft 是鼠标滚动，卷起来的高度/宽度

第一种方式.html（复杂方式）：

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
            width: 5000px;
        }
    </style>
</head>
<body>


    <script>

        //需求：封装一个兼容的scroll()。返回值是json，用scroll().top获取scrollTop
        //需求：封装一个兼容的scroll()。返回值是json，用scroll().left获取scrollLeft

        window.onscroll = function () {
            console.log(scroll().top);
            console.log(scroll().left);
        }



        function scroll(){
            if(window.pageYOffset !== undefined){
                return {
                    "top": window.pageYOffset,
                    "left": window.pageXOffset
                };
            }else if(document.compatMode === "CSS1Compat"){  //如果页面声明了DTD约束
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            }else{  //如果页面未声明DTD约束
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }

            //简单封装（实际工作使用）
//            return {
//                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
//                "left":  window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
//            }
        }

    </script>
</body>
</html>

第二种方式.hrml（简单方式）：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
            width: 5000px;
        }
    </style>
</head>
<body>

    <script>

        //需求：封装一个兼容的scroll()。返回值是json，用scroll().top获取scrollTop
        //需求：封装一个兼容的scroll()。返回值是json，用scroll().left获取scrollLeft

        window.onscroll = function () {
            console.log(scroll().top);
            console.log(scroll().left);
        }

        function scroll(){
			return {
                "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
                "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
            }
        }

    </script>
</body>
</html>

houyanhua1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 获取ScrollTop/ScrollLeft的函数封装

第一种方式.html（复杂方式）：&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body { height: 5000px;
复制链接

扫一扫