scroll系列

Tutorial: DOM实战 Category: JS Published: 2026-04-07 13:58:26 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>
Prev: 像素比和pageshow事件 Next: 仿淘宝固定侧边栏