JavaScript网页滚动距离

最新推荐文章于 2024-06-30 15:38:14 发布

Cao_Mary

最新推荐文章于 2024-06-30 15:38:14 发布

阅读量2.9k

点赞数

分类专栏：前端 javaScript 文章标签： JavaScript 鼠标滚动距离网页滚动距离滚动条距离

本文链接：https://blog.csdn.net/Cao_Mary/article/details/90232473

版权

前端同时被 2 个专栏收录

54 篇文章 3 订阅

订阅专栏

javaScript

31 篇文章 0 订阅

订阅专栏

不同浏览器获取网页滚动距离的方法不同

浏览器在渲染网页的时候有两种模式：“标准模式（CSS1Compat）”、“混杂模式/怪异模式（BackCompat）”
默认情况下都是以标准模式来渲染的，
如果网页没有书写文档声明就会按照”混杂模式/怪异模式“来进行渲染

文档声明：<!DOCTYPE html>

1.IE9以及IE9以上的浏览器

window.pageXOffset;//水平方向
window.pageYOffset;//垂直方向

2.标准模式下浏览器

document.documentElement.scrollTop;//垂直方向
document.documentElement.scrollLeft;//水平方向

3.混杂（怪异）模式下浏览器

document.body.scrollTop;//垂直方向
document.body.scrollLeft;//水平方向

4.解决网页滚动的距离的兼容问题：将网页滚动的距离封装成方法

<script>
    window.onscroll = function () {//鼠标的滚动事件
        let{x, y} = getPageScroll();//对象的解构赋值——ES6新增
        console.log(x, y);//答应水平与垂直方向的滚动距离
        
        function getPageScroll() {//获取网页滚动距离的方法
            let x, y;
            if (window.pageXOffset){//查看有无pageXOffset属性：IE9以及IE9以上的浏览器
                x = window.pageXOffset;
                y = window.pageYOffset;
            }else if (document.compatMode ==  "BackCompat"){//混杂（怪异）模式下浏览器
                x = document.body.scrollLeft;
                y = document.body.scrollTop;
            }else {//标准模式下浏览器
                x = document.documentElement.scrollLeft;
                y = document.documentElement.scrollTop;
            }
            return {//返回水平距离、垂直距离
                x:x,
                y: y
            }
        }
    }

</script>