卷曲document.body.scrollTop的值总为零的解决办法

最新推荐文章于 2022-05-27 14:53:41 发布

喵_美

最新推荐文章于 2022-05-27 14:53:41 发布

阅读量520

点赞数

转载

document.body.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>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      height: 1000px;
      background-color: #ccc;
    }
    .header{
      height: 100px;
      width: 100%;
      background-color: #E72C2C;
      position: fixed;
      top: 0;
    }
  </style>
</head>
<body>
  <div>
    <div id="header" class="header"></div>
  </div>
  <script>
    window.onscroll = function () {
      var sTop = document.body.scrollTop;
      console.log(sTop);
      if(sTop>100){
        document.getElementById("header").style.backgroundColor = '#F59797';
      }else{
        document.getElementById("header").style.backgroundColor = '#E72C2C';
      }
    };
  </script>
</body>
</html>

但是发现document.body.scrollTop一直是0。

查资料发现是DTD的问题。

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement.scrollTop。

页面没有DTD，即没指定DOCTYPE时，使用document.body.scrollTop。

各浏览器下 scrollTop的差异
IE：
对于没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Chrome、Firefox：
对于没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度；
对于有doctype声明的页面，则使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数： window.pageYOffset ；

3、解决办法
因此，为了兼容所有浏览器，封装一个函数，去获取页面向上卷曲出去的距离和向左卷曲出去的距离

//获得页面向左、向上卷动的距离

function getScroll(){
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
}

因此，js代码如下：

window.onscroll = function () {
  //获得页面向左、向上卷动的距离
  function getScroll(){
      return {
          left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
          top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      };
  }
  var sTop = getScroll().top;
  console.log(sTop);
  if(sTop>100){
    document.getElementById("header").style.backgroundColor = '#F59797';
  }else{
    document.getElementById("header").style.backgroundColor = '#E72C2C';
  }
};

作者：sleepwalker_1992
来源：CSDN
原文：https://blog.csdn.net/sleepwalker_1992/article/details/80677845

喵_美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
卷曲document.body.scrollTop的值总为零的解决办法

转载document.body.scrollTop的值总为零的原因有一个功能需要判断下拉的距离，设置头部固定导航栏的颜色。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...
复制链接

扫一扫