day23 Web APIs 5

目录

一、滚动事件和加载事件

1、滚动事件

2、加载事件

二、元素大小和位置

1、scroll家族

2、offset家族

3、client家族

---

一、滚动事件和加载事件

1、滚动事件

（1）什么是滚动事件

• 当页面进行滚动时触发的事件
• 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部。
• 事件名：scroll（监听整个页面滚动）
• 语法：（给window 或document 添加scroll 事件）

 而如果要监听某个元素的内部滚动，直接给某个元素加即可

2、加载事件

（1）什么是加载事件

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

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

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

 总结：

1.页面滚动事件如何添加？

• scroll
• 监听整个页面滚动给window 或document 加

2.加载事件有哪两个？如何添加？

• load 事件：监听整个页面资源给window 加
• DOMContentLoaded：给document 加,当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

二、元素大小和位置

1、scroll家族

使用场景：

• 我们想要页面滚动一段距离，比如100px，就让某些元素显示隐藏，那我们怎么知道，页面滚动了100像素呢？就可以使用scroll 来检测页面滚动的距离~~~

 获取宽高：

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

获取位置:

• 获取元素内容往左、往上滚出去看不到的距离
• scrollLeft和scrollTop
• 这两个属性是可以修改的

•  开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

 注意：

• document.documentElementHTML 文档返回对象为HTML元素

 总结：

1.scrollWidth和scrollHeight是得到元素什么的宽高？

• 内容
• 不包含滚动条

2.被卷去的头部或者左侧用那个属性？是否可以读取和修改？

• scrollTop/ scrollLeft
• 可以读取，也可以修改（赋值）

3.检测页面滚动的头部距离（被卷去的头部）用那个属性？

• document.documentElement.scrollTop

2、offset家族

使用场景：

• 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。简单说，就是通过js的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置，就可以返回顶部的小盒子显示…

 获取宽高：

• 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
• offsetWidth和offsetHeight

获取位置：

• 获取元素距离自己定位父级元素的左、上距离
• offsetLeft和offsetTop注意是只读属性

 总结：

1.offsetWidth和offsetHeight是得到元素什么的宽高？

• 内容+ padding +border

2.offsetTop和offsetLeft得到位置以谁为准？

• 带有定位的父级如果都没有则以文档左上角为准

3、client家族

获取宽高：

• 获取元素的可见部分宽高（不包含边框，滚动条等）
• clientWidth和clientHeight

获取位置：

• 获取左边框和上边框宽度
• clientLeft和clientTop注意是只读属性

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

• resize

 检测屏幕宽度：