document.documentElement.scrollTop与document.body.scrollTop的兼容写法

最新推荐文章于 2023-08-19 23:01:09 发布

Martin-Luo

最新推荐文章于 2023-08-19 23:01:09 发布

阅读量844

点赞数

分类专栏： JavaScript 文章标签： javascript js web

本文链接：https://blog.csdn.net/Dragon_Luo/article/details/117587298

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

场景分析

document.documentElement与document.body输出
DTD相关说明：
页面具有 DTD或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD或者说没有指定了 DOCTYPE时，使用 document.body。
设置<!DOCTYPE html>效果显示：
document.documentElement.scrollTop可以获取滚动的值
document.body.scrollTop的值为0
未设置<!DOCTYPE html>效果显示：
document.documentElement.scrollTop的值为0
document.body.scrollTop可以获取滚动的值
window.pageYOffset介绍
pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。
这些属性是只读的。
兼容IE9及以上版本
兼容写法

// 当IE9+版本window.pageXOffset获取滚动距离
// 当IE9以下版本指定<!DOCTYPE html>可以通过document.documentElement.scrollTop获取滚动距离
// 当IE9以下版本未指定<!DOCTYPE html>可以通过document.body.scrollTop获取滚动距离
var x = window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop

// 函数封装
// 当我们第一次调用后，根据浏览器对属性的支持不在进入if else逻辑，从而执行效率
function getScrollOffset() {
  if (window.pageXOffset) {
    getScrollOffset = function() {
      return {
        top: window.pageXOffset,
        left: window.pageYOffset
      }
    }
  } else {
    getScrollOffset = function () {
      return {
        top: document.documentElement.scrollTop + document.body.scrollTop,
        left: document.documentElement.scrollLeft + document.body.scrollLeft
      }
    }
  }

  return getScrollOffset()
}

Martin-Luo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
document.documentElement.scrollTop与document.body.scrollTop的兼容写法

场景分析document.documentElement与document.body输出DTD相关说明：页面具有 DTD或者说指定了 DOCTYPE 时，使用 document.documentElement。页面不具有 DTD或者说没有指定了 DOCTYPE时，使用 document.body。设置<!DOCTYPE html>效果显示：document.documentElement.scrollTop可以获取滚动的值document.body.scrollTop的值
复制链接

扫一扫