WebAPI滚动事件和加载事件 元素大小和位置

滚动事件

• 当页面滚动时触发的事件
• 固定导航栏、返回顶部模块常用
• 事件名：scroll
• 语法：

• window.addEventListener('scroll', function () {})
  

注：可给window或docunment(不建议)添加scroll事件

加载事件

• 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
• 事件名：load
• 语法：

• window.addEventListener('load', function () {})
  

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

DOMContentLoaded 事件

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

• document.addEventListener('DOMContentLoaded',function(){})
  

元素大小和位置

• scroll家族
• offset家族
• client家族

scroll家族

获取元素宽高：

0. 属性：scrollWidth和scrollHeight
1. 获取元素内容（content+padding）可视区域包括卷出屏幕内容的总宽高（不包含滚动条）返回值不带单位

获取位置：

0. 获取元素内容往左、往上滚出去看不到的距离
1. scrollLeft和scrollTop
2. 这两个可以修改的

开发中，经常检测屏幕滚动的距离，比如向上滚动100px，就固定一个元素（顶部导航栏），或显示一个元素（返回顶部）

 window.addEventListener('scroll', function () {
        // 获取页面卷起
        let scrolltop = document.documentElement.scrollTop
})

注意：document.documentElemen HTML文档返回对象为HTML元素

offset家族

获取宽高：

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

获取位置：

0. offsetLeft和offsetTop，只读属性
1. 获取元素距离自己定位父级元素的左、上距离，没有定位父级元素则以 文档左上角 为准

client家族

获取宽高：

0. clientWidth和clientHeight
1. 获取元素的可见部分宽高，不包括卷出屏幕内容（不包含边框，滚动条等）

获取位置：

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

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

• 事件名resize

• window.addEventListener('resize',function(){})
  

检测屏幕宽度

• window.addEventListener('resize', function () {
          let w = document.documentElement.clientWidth
          console.log(w);
        })