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>