ThatManK Mobile Article

scroll系列

Category: JS Tutorial: DOM操作 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

scroll 系列

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 10px solid red;
        padding: 10px;
        overflow: auto;
      }
    </style>
  </head>

  <body>
    <div>
      我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
      我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
      我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
      我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
      我是内容 我是内容
    </div>

    <script>
      // scroll 系列
      var div = document.querySelector("div");
      console.log(div.scrollHeight); // 293 包含padding, 不包含border
      console.log(div.clientHeight); // 220 不是 240

      // scroll滚动事件当我们滚动条发生变化会触发的事件
      div.addEventListener("scroll", function () {
        console.log(div.scrollTop); // 73
      });
    </script>
  </body>
</html>