scroll系列

 

 scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素大小  滚动距离等。

<style>
    div {
      width: 100px;
      height: 70px;
      background-color: pink;
      border: 3px solid red;
    }
  </style>
  <body>
    <div>
      我是内容内容 我是内容内容 我是内容内容 我是内容内容 我是内容内容
      我是内容内容 我是内容内容 我是内容内容 我是内容内容
    </div>
  </body>
  <script>
    // scroll系列
    var div = document.querySelector("div");
    console.log(div.scrollHeight);
    console.log(div.clientHeight);
    // scroll滚动事件当我们滚动条发生变化会触发的事件
    div.addEventListener("scroll", function () {
      console.log(div.scrollTop);
    });
  </script>

 

posted @ 2022-04-18 15:46  罗砂  阅读(55)  评论(0)    收藏  举报