<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 20px;
overflow: auto;
}
</style>
</head>
<body>
<div>
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
<script>
var div = document.querySelector('div');
//scroll翻译过来是滚动的，使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。
//1.element.scrollTop 返回被卷去的上侧距离，返回数值不带单位
console.log(div.scrollTop);
//2.element.scrollLeft 返回被卷去的左侧侧距离，返回数值不带单位
//3.element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
console.log(div.scrollWidth);
//4.element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位
console.log(div.scrollHeight);//返回高度是包括内容超出部分的
//页面被卷去的头部
//如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条，当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部，滚动条在滚动时会触发onscroll事件
var div = document.querySelector('div');
console.log(div.scrollHeight);
console.log(div.clientHeight);
//scroll滚动事件 当我们滚动条发生变化会触发的事件
div.addEventListener('scroll', function () {
console.log(div.scrollTop);
});
</script>
</body>
</html>