页面滚动事件
scroll
给某个元素来注册
更多的是给页面注册
window 或者 document
页面加载事件
load
给 window 注册
当页面加载 还要等页面中引用外部资源(img、css、js文件)加载完成才执行
DOMContentLoaded
给 document 注册
当页面加载完成就来执行,不等外部资源的加载
当js代码写在head标签中,会导致元素获取不到,js代码 写在load 或者 DOMContentLoaded里面
三大家族
offset家族
offsetWidth offsetHeight 获取元素自身真实宽高大小
offsetLeft offsetTop 获取元素到定位父级之间的距离 (如果定位父级不存在,获取的是到body的距离)
只读属性
scroll家族
scrollWidth scrollHeight 获取元素内容的宽高大小
只读属性
scrollLeft scrollTop 获取滚动卷曲距离
获取页面滚动卷曲距离
通过html的scrollTop来获取
document.documentElement.scrollTop
不仅可以获取,还可以设置(document.documentElement.scrollTop = 0) 返回顶部
client家族
clientWidth clientHeight 获取元素 可视区 的大小
clientLeft clientTop 获取 元素左 上 边框大小
resize 事件 当浏览器窗口大小发生改变的时候就会触发该事件
window注册事件
load
scroll
resize