zoukankan      html  css  js  c++  java
  • 获取网页滚动的高度

    自己平时写代码没有注意到这些,但是在看别人源码的时候,发现一段注释:pageYOffset has better support than scrollTop,于是突然来了兴趣,也搜索尝试一番,如下是自己的总结。

    有四种方式来获取网页向上滚动的距离:

    • window.scrollY
    • window.pageYOffset
    • document.body.scrollTop
    • document.documentElement.scrollTop

    scrollY与pageYOffset的兼容性

    window.scrollY返回文档在垂直方向上滚动的像素值。pageYOffsetscrollY属性的别名。两者是完全相等的:

    window.scrollY === window.pageYOffset;
    // true
    window.scrollX === window.pageXOffset;
    // true
    

    在所有的浏览器中都有实现pageX/YOffset属性,但scrollX/Y不一定,所以,为了更好的兼容性,请用pageX/YOffset替代scrollX/Y

    在IE9以下IE浏览器中,scrollY, scrollX, pageYOffsetpageXOffset都不支持。

    body.scrollTop与documentElement.scrollTop兼容性

    在IE9以下的浏览器中,需要使用document.body.scrollTop与document.documentElement.scrollTop来替代。

    但是这两者依然存在兼容性问题:

    标准模式下(标准dtd声明):支持documentElement.scrollTop,而body.scrollTop为0(但是在safari下是反过来的)。

    怪异模式下(非标准dtd或没有写):支持body.scrollTop,但documentElement.scrollTop值为0(这点safari表现一致)。

    我们知道,在IE中,标准模式与怪异模式两者的盒模型是不一致的,标准模式下,盒模型和其他浏览器一致,但在怪异模式下大不相同,那么,如何判断当前是标准模式还是怪异模式呢?

    var isCSS1Compat = document.compatMode == "CSS1Compat";
    var y = isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
    

    补充一点:compatMode指兼容模式,有两个取值,一个是CSS1Compat,表示标准兼容模式开启(标准模式),另一个是BackCompat,表示标准兼容模式关闭(怪异模式)。

    兼容写法

    所以为了兼容所有浏览器,需要用到如下简单兼容写法:

    var x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
    var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    

    或者,采用MDN的兼容写法:

    var supportPageOffset = window.pageXOffset !== undefined;
    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
    
    var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
    var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
    

    参考文档

  • 相关阅读:
    初识python: random 模块
    初识python: 模块定义及调用
    JSON的stringify和parse方法
    微信小程序:日期组件picker的使用
    微信小程序:给data中对象中的属性设置值与给data中的属性或对象或数组设置值的区别
    微信小程序:点击预览大图功能
    微信小程序:解决小程序中有些格式如webpiPhone手机暂不支持的问题
    微信小程序:优化页面要渲染的属性
    微信小程序:标签字符串直接变成标签来显示要通过富文本技术
    微信小程序:添加全局的正在加载中图标效果
  • 原文地址:https://www.cnblogs.com/yangyoucun/p/7078640.html
Copyright © 2011-2022 走看看