页面滚动时的位置：为了兼容浏览器，封装自己的scrollTop和scrollLeft(内含“怪异模式”）

来源：互联网发布：linux基本命令的使用编辑：程序博客网时间：2024/09/21 09:21

三种兼容表现形式：

document.body.scrollTop//360 谷歌等标准模式

document.documentElement.scrollTop//火狐,IE浏览器及怪异模式

window.pageYOffset//最新的浏览器都支持 ie9+

未封装的写法：

window.onscroll=function(){        var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;//兼容写法        console.log(scrollTop);    }

封装后的写法：

//   varjson = {left: 10, right: 10}  变异    //json.left   json.top    // 封装自己的scrollTop和scrollLeft    function scroll() {        if(window.pageXOffset != null){            return{                left:window.pageXOffset, //IE不支持                top:window.pageYOffset            }        }else if(document.compatMode == "CSS1Compat"){            // 如果是怪异模式            // 怪异模式就是没有声明文档类型DTD，即没有<!DOCTYPE html>这句            // document.compatMode == "BackCompat"//如果不是怪异模式；如果没有声明DTD            return{//  声明了DTD的document.documentElement 都支持,                left:document.documentElement.scrollLeft;//标准模式                top:document.documentElement.scrollTop            }        }        return{//没有声明DTD 怪异模式的写法：            left:document.body.scrollLeft,            top:document.body.scrollTop        }    }    window.onscroll=function(){        console.log(scroll().top);        console.log(scroll().left)    }

html:

body {
height: 3000px;
width: 2000px;
}

0 0