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

秒速五厘米 2023-08-17 15:36 153阅读 0赞

### 查看滚动条的滚动距离： ###

### 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>