查看滚动条的滚动距离：X轴：window.pageXOffset、... Y轴：window.pageYOffset、...。封装兼容性方法，求滚动轮滚动距离getScrollOffset()

最新推荐文章于 2021-11-15 12:55:09 发布

&XYZ&

最新推荐文章于 2021-11-15 12:55:09 发布

阅读量862

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/101474139

版权

JavaScript 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

查看滚动条的滚动距离：

X轴：

window.pageXOffset、

document.body.scrollLeft、

document.documentElement.scrollLeft

Y轴：

window.pageYOffset、

document.body.scrollTop、

document.documentElement.scrollTop

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        div {
            width: 3700px;
            height: 3000px;
            border: 1px solid #cccccc;
        }
    </style>
</head>

<body>
<div></div>
</body>

<script>
    /*
    查看滚动条的滚动距离：
        X轴：window.pageXOffset
        Y轴：window.pageYOffset
     但是IE8及IE8以下的不兼容上面的这个两个方法，只能通过：
        X轴：document.body.scrollLeft
        Y轴：document.body.scrollTop

        X轴：document.documentElement.scrollLeft
        Y轴：document.documentElement.scrollTop

      疑问：为什么在兼容IE8及IE8以下的时候会有两个求X轴和Y轴？
            答：因为IE8、IE7、IE6中你不知道到底是那个方法好使，
            但是它们有个特点就是这两个方法的X轴和Y轴在同一个版本中
            肯定有一个会为0,所以我们使用时将两个值相加，
            X轴：document.body.scrollLeft + document.documentElement.scrollLeft
            Y轴：document.body.scrollTop + document.documentElement.scrollTop

     */
    const X = window.pageXOffset;//X轴滚动的距离
    const Y = window.pageYOffset;//Y轴滚动的距离
    console.log('X=' + X);
    console.log('Y=' + Y);

    const XX = document.body.scrollLeft;//X轴滚动的距离
    const YY = document.body.scrollTop;//Y轴滚动的距离
    console.log('X=' + XX);
    console.log('Y=' + YY);

    const XXX = document.documentElement.scrollLeft;//X轴滚动的距离
    const YYY = document.documentElement.scrollTop;//Y轴滚动的距离
    console.log('X=' + XXX);
    console.log('Y=' + YYY);
    

    /*
    封装兼容性方法，求滚动轮滚动距离getScrollOffset()
     */
    function getScrollOffset() {
        if (window.pageXOffset) {
            return {
                x: window.pageXOffset,
                y: window.pageYOffset
            }
        } else {
            return {
                x: document.body.scrollLeft + document.documentElement.scrollLeft,
                y: document.body.scrollTop + document.documentElement.scrollTop
            }
        }
    }

</script>
</html>

&XYZ&

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
查看滚动条的滚动距离：X轴：window.pageXOffset、... Y轴：window.pageYOffset、...。封装兼容性方法，求滚动轮滚动距离getScrollOffset()

查看滚动条的滚动距离：X轴： window.pageXOffset、 document.body.scrollLeft、 document.documentElement.scrollLeftY轴： window.pageYOffset、 document.body.scrollTop、 document.documentElement.scrollTo...
复制链接

扫一扫