/*1.复习:
1.offset家族:获取元素自身的真实宽高和位置(a.获取number类型 b.只能获取不能设置)
* offsetWidth/Height:获取元素自身真实的宽高(width + border + padding)
* offsetParent: 获取元素最近的定位父级
* offfsetLeft/Top:获取元素自身的左/上外边框与定位父级的左/上内边框的距离
2.scroll家族:获取元素内容的真实宽高
scrollWidth/Height:获取元素内容的真实宽高
scrollLeft/Top:获取左/上滚动出去的距离
3.滚动条事件: onscroll
*/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标题</title>
<style>
.one {
width: 200px;
height: 200px;
border: 1px solid #000;
overflow: auto;
}
img {
vertical-align: top;
}
</style>
</head>
<body>
<div class="one" id="box">
<img src="1.jpg" alt=""/>
</div>
</body>
<script>
var box = document.getElementById('box');
console.log ( box.offsetWidth, box.offsetHeight );
console.log ( box.scrollWidth, box.scrollHeight );
box.onscroll = function ( ) {
console.log ( "有人动了滚动条" );
console.log ( box.scrollLeft, box.scrollTop );
}
</script>
</html>