滚动事件
当页面进行滚动时触发
目的:页面滚动到某个区域后做一些处理,比如固定导航栏,比如返回顶部
事件名:scroll
window.addEventListener('scroll',function(){})
监听某个元素内部滚动同理
加载事件
加载外部资源(图片、外联CSS和JS等)加载完毕时触发的事件
事件名:load
window.addEventListener('load',function(){})
当初始的HTML文档被完全加载和解析完成后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载
事件名:DOMContentLoaded
一般给document加
元素大小和位置
scroll
获取宽高
获取元素内容总宽高(不包含滚动条),返回值不带单位
scrollWidth和scrollHeight
获取位置
获取元素往左、往上滚出去的距离
scrollLeft和scrollTop
这两个属性可以修改
获取当前页面距离顶端的距离
console.log(document.documentElement.scrollTop);
offset
获取宽高
- 获取元素的自身宽高、包含元素自身设置的宽高、padding. border
- offsetWidth和offsetHeight
获取位置
- 获取元素距离自己定位父级元素的左、上距离
- offsetLeft和offsetTop 注意是只读属性
client
获取宽高
- 获取元素的可见部分宽高(不包含边框,滚动条等)
- clientWidth和clientHeight
获取位置
- 获取左边框和上边框宽度
- clientLeft和clientTop 注意是只读属性