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

网页基础样式与滚动条位置获取

最新推荐文章于 2021-06-02 21:07:45 发布

原创最新推荐文章于 2021-06-02 21:07:45 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript 基本小效果的实现 #函数

Webpage Effects 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种清除网页默认样式的通用方法，并提供了一个JavaScript模块来获取页面滚动条的位置，包括对不同浏览器兼容性的处理。

基础样式：

/* 用通配符清除默认样式减少代码量，实际项目应对用到的标签清除默认样式*/
*{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
    }
}