js的scroll的封装

最新推荐文章于 2022-12-03 09:32:42 发布

约德尔蒙

最新推荐文章于 2022-12-03 09:32:42 发布

阅读量443

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53242526

版权

Js 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

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

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



    function scroll(){
        //如果这个属性存在，那么返回值应该是0-无穷大
        //如果没有返回值是undefined；
        //只要判断不是undefined就可以调用此方法
        //练习使用此种封装
        if(window.pageYOffset !== undefined){
//                var json = {
//                    "top": window.pageYOffset,
//                    "left": window.pageXOffset
//                };
//                return json;
            return {
                "top": window.pageYOffset,
                "left": window.pageXOffset
            };
        }else if(document.compatMode === "CSS1Compat"){
            return {
                "top": document.documentElement.scrollTop,
                "left": document.documentElement.scrollLeft
            };
        }else{
            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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的scroll的封装

Title //需求：封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop //需求：封装一个兼容的scroll().返回值是json，用scroll().left获取scrollLeft window.onscroll = function () {// var json = scroll();//
复制链接

扫一扫

专栏目录