JavaScript网页滚动距离

最新推荐文章于 2024-05-04 14:55:11 发布

Cao_Mary

最新推荐文章于 2024-05-04 14:55:11 发布

阅读量2.8k

点赞数

分类专栏：前端 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>

Cao_Mary

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript网页滚动距离

不同浏览器获取网页滚动距离的方法不同浏览器在渲染网页的时候有两种模式：“标准模式（CSS1Compat）”、“混杂模式/怪异模式（BackCompat）”默认情况下都是以标准模式来渲染的，如果网页没有书写文档声明就会按照”混杂模式/怪异模式“来进行渲染文档声明：<!DOCTYPE html>1.IE9以及IE9以上的浏览器window.pageXOffset;//水...
复制链接

扫一扫