当元素内部本身存在滚动条时可以使用scrollTop,此时scrollTop值等于元素内部内容向下滚动值,不带单位。
offsetTop指的是此元素与有定位的父元素的顶部距离,一般为定值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{ height:2000px;}
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');
/* var body=document.body; */
/* console.log('div.scrollHeight'+div.scrollHeight); */
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll', function() {
console.log('div.scrollTop'+' '+div.scrollTop);
})
document.addEventListener('scroll',function(){
console.log('div.offsetTop'+' '+div.offsetTop);
console.log('div.scrollTop'+' '+div.scrollTop);
})
</script>
</body>
</html>