WebAPI_DAY5_滚动事件,加载事件

滚动事件#

当页面进行滚动时触发

目的：页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

事件名：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 注意是只读属性