目录
一、滚动事件和加载事件
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
检测屏幕宽度: