scroll（）、client（）函数封装

最新推荐文章于 2022-05-18 14:41:53 发布

嘿！那傻狗

最新推荐文章于 2022-05-18 14:41:53 发布

阅读量443

点赞数

分类专栏：前端 JavaScript 文章标签： JavaScript 封装函数

本文链接：https://blog.csdn.net/ProgramLife_CSDN/article/details/83540369

版权

前端同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

！！！都是针对浏览器的

scroll（）函数封装，解决scrollTop、scrollLeft的兼容性问题
client（）函数封装，解决clientWidth、clientLeft的兼容性问题

 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
            }
        }

   //新事件：浏览器大小变化事件（浏览器哪怕大小变化1px也会触动这个事件）
    window.onresize = function () {
        document.title = client().width + "    "+ client().height;
    }

    //获取屏幕可视区域的宽高
    function client(){
        if(window.innerHeight !== undefined){
            return {
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        }else if(document.compatMode === "CSS1Compat"){
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        }else{
            return {
                "width": document.body.clientWidth,
                "height": document.body.clientHeight
            }
        }
    }