scroll封装及兼容性写法

最新推荐文章于 2023-04-19 09:39:05 发布

mj_leona

最新推荐文章于 2023-04-19 09:39:05 发布

阅读量1.6k

点赞数

本文链接：https://blog.youkuaiyun.com/mj_leona/article/details/79631339

版权

本文介绍了一个JavaScript函数`scroll()`，用于获取页面滚动条的位置，并考虑了不同浏览器的兼容性问题。通过检查`window.pageYOffset`、`document.compatMode`以及`document.body.scrollLeft/top`来确定滚动位置，确保在IE9+和非IE浏览器中都能正常工作。当用户滚动页面时，函数会打印滚动条的垂直位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
    function scroll() {
        if(window.pageYOffset !=null)  //ie9+及主流浏览器支持的格式
        {
            return{
                left:window.pageXOffset,
                top:window.pageYOffset
            }
        }
        else if(document.compatMode == "CSS1Compat") //声明了DTD(<!DOCTYPE html>)，但不支持上面的格式,google不支持，其他浏览器支持
        {
            return{
                left:document.documentElement.scrollLeft,
                top:document.documentElement.scrollTop
            }
        }
        return{
            left:document.body.scrollLeft,       //google支持，还有没有声明DTD的页面支持
            top:document.body.scrollTop
        }
    }

    window.onscroll = function () {
        console.log(scroll().top);
    }
</script>