文档滚动对 scrollTop scrollLeft的兼容性封装

来源：互联网发布：江西省网络作家协会编辑：程序博客网时间：2024/05/24 06:20

基础样式：

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/*{margin: 0;padding: 0;list-style: none;outline: none;}/* 此处是为了撑开文档 */html,body{height: 2000px;}

javascript模块：

/* 测试被卷去的顶部 */window.onscroll = function () {    document.title = scroll().top;}// scrollTop scrollLeft的封装function scroll() {    if(window.pageYOffset != null) {        return {            // 注： ie9+ 高版本浏览器 火狐谷歌等            left: window.pageXOffset,            top: window.pageYOffset        }    } else if( document.compatMode === 'CSS1Compat' ) {        return {            // 注：经测试  IE 6 及以上版本支持这种写法， 但火狐谷歌不支持。            left: document.documentElement.scrollLeft,            top: document.documentElement.scrollTop        }    }    return {        // 注：经测试 IE 6789 都不支持这种写法(值为0)，但火狐谷歌支持。        left: document.body.scrollLeft,        top: document.body.scrollTop    }}

0 0