DOM网页特效的说明》

滚动事件和加载事件

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

//页面滚动事件
window.addEventListener('scroll',function(){
//执行的操作
})
1
2
3
4

给window或document添加scroll事件

加载资源
场景：加载外部资源（如图片，外联css和JavaScript等），加载完毕时触发的事件
事件名：load
监听页面所有资源加载完毕：
给window添加load事件

//页面加载事件
window.addEventListener('load',function(){
//执行的操作
})

1
2
3
4
5

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

当初始的html文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表，图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕：
给document添加DOMContentLoaded事件

document.addEventLister('DOMContentLoaded',function(){
//执行的操作
})
1
2
3

元素大小和位置

scroll家族
使用场景：使用scroll来检测页面滚动的距离

获取宽高：
1.获取元素的内容总宽高（不包含滚动条），返回值不带单位
2.scrollWidth和scrollHeight

获取位置：
1.获取元素内容往左，往上滚出去看不到的距离
2.scrollLeft和scrollTop
3.这两个属性是可以修改的

div.addEventListener('scroll',function(){
 console.log(this.scrollTop)
})
1
2
3

获取整个页面的标签

document.documentElememt
1

offset家族
使用场景：当页面滚动到某个元素，就可以做某些事情

获取宽高：
1.获取元素的自身宽高，包含元素自身设置的宽高，padding,border
2.offsetWidth和offsetHeight

获取位置：
1.获取元素距离自己定位父级元素的左，上距离
2.offsetLeft和offsetTop 注意是只读属性

client家族
获取宽高：
1.获取元素的可见部分宽高（不包含边框，滚动条等）
2.clientWidth和clientHeight

获取位置：
1.获取左边框和上边框宽度
2.clientLeft和clientTop 注意是只读属性

会在窗口尺寸改变的时候触发事件：
resize

window,addEventListener('resize',function(){
  // 执行代码
})
1
2
3

检测屏幕宽度：

window.addEventListener('resize',function(){
   let w = document.documentElement.clientWidth
   console.log(w)
})
1
2
3
4