滚动事件和加载事件

滚动事件
当页面进行滚动时触发的事件
事件名：scroll
监听整个页面滚动：

image.png

image.png

加载事件
事件名：load

image.png

事件名：DOMContentLoaded

image.png

image.png

元素大小和位置
scroll家族
获取宽高：
scrollWidth和scrollHeight
获取元素的内容总宽高（不包含滚动条）返回值不带单位
只读属性
获取位置:
scrollLeft和scrollTop
获取元素内容往左、往上滚出去看不到的距离
这两个属性是可以修改的

image.png

offset家族
获取宽高：
offsetWidth和offsetHeight
获取元素的真实宽高、包含元素自身设置的宽高、padding、border
获取位置：
offsetLeft和offsetTop Ø 获取元素距离自己定位父级元素的左、上距离

client家族
获取宽高：
clientWidth和clientHeight
获取元素的可见部分宽高（不包含边框，滚动条等）
获取位置：
clientLeft和clientTop
获取左边框和上边框宽度

image.png

image.png