scrollTop滚动的时候一直是0

最新推荐文章于 2023-09-13 09:50:15 发布

月落星河°

最新推荐文章于 2023-09-13 09:50:15 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： scrollTop为0 js 滚动 js 怎么设置滚动滚动单位不变滚动不变

本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/113475126

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一次项目scrollTop的小记，为body添加了onscroll的时候scrollTop一直是0，使用下面的方法

// documentElement 属性以一个元素对象返回一个文档的文档元素
document.documentElement.scrollTop || document.body.scrollTop

只是针对于body的时候会是0，我直接写了个box，就可以直接使用，出现这个如果是body不能使用的原因是应该是没有选中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scroll</title>
</head>
  <style>
      #container {
          width: 300px;
          height: 200px;
          overflow-y: scroll;
          border: 1px solid red;
      }
  </style>
<body>
  <div id="container">
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box">scroll</div>
    <div class="box" onclick="aclick()" style="color: red;font-weight:bold;font-size: 26px;">到底了</div>
  </div>
  <script>
    let container = document.querySelector('#container')
    console.log(container.scrollHeight)
    container.onscroll = function (e) {
      console.log(container.scrollTop) 
    }
    function aclick() {
      container.scrollTop = 0
    }  
  </script>
</body>

</html>

在这里插入图片描述
下面的代码是滚动整个body的时候一直为0的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scroll</title>
</head>
  
<body>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box">scroll</div>
  <div class="box" onclick="aclick()" style="color: red;font-weight:bold;font-size: 26px;">到底了</div>
  <script>  
     let body =  document.querySelector('body')
     body.onscroll = function(e) {
          console.log(body.scrollTop) 
          console.log(document.documentElement.scrollTop) // 这个是可以打印出来
     }
     function aclick() {
       document.documentElement.scrollTop = 0
     }  
  </script>
</body>

</html>

月落星河°

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
scrollTop滚动的时候一直是0

一次项目scrollTop的小记，为body添加了onscroll的时候scrollTop一直是0，使用下面的方法// documentElement 属性以一个元素对象返回一个文档的文档元素document.documentElement.scrollTop || document.body.scrollTop只是针对于body的时候会是0，我直接写了个box，就可以直接使用，出现这个如果是body不能使用的原因是应该是没有选中<!DOCTYPE html><html lan
复制链接

扫一扫