文章目录
滚动事件
当页面进行滚动时触发的事件
- 为什么要学?
很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏,比如返回顶部 - 事件名:
scroll
- 监听整个页面滚动:
给window
或document
添加scroll
事件
监听某个元素的内部滚动直接给某个元素加即可
window.addEventListener('scroll', function () {
console.log('scroll')
})
加载事件
方法1
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
- 为什么要学?
有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中,这时候直接找 dom 元素找不到 - 事件名:
load
- 监听页面所有资源加载完毕:
给 window 添加load
事件
window.addEventListener('load', function () {
console.log('load')
})
- 注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定
load
事件
方法2
- 当初始的
HTML
文档被完全加载和解析完成之后,DOMContentLoaded
事件被触发,而无需等待样式表、图像等完全加载。 - 事件名:
DOMContentLoaded
- 监听页面DOM加载完毕:
给document
添加DOMContentLoaded
事件
window.addEventListener('DOMContentLoaded', function () {
console.log('DOMContentLoaded')
})
scroll家族(scroll dimensions 滚动尺寸)
- 获取宽高:
获取元素的内容
总宽高(不包含滚动条)返回值不带单位
scrollWidth
和scrollHeight
- 获取位置:
获取元素内容往左、往上滚出去看不到的距离
scrollLeft
和scrollTop
这两个属性是 可以修改的
div.addEventListener('scroll', function () {
console.log(this.scrollTop)
})
- scrollWidth和scrollHeight是得到元素什么的宽高?
内容宽高,不包含滚动条- 被卷去的头部或者左侧用那个属性?是否可以读取和修改?
scrollTop / scrollLeft
可以读取,也可以修改(赋值)- 检测页面滚动的头部距离(被卷去的头部)用那个属性?
document.documentElement.scrollTop
页面滚动显示返回顶部按钮(案例)
部分代码:
<body>
<div class="content"></div>
<div class="backtop">
<img src="./images/close2.png" alt="">
<a href="javascript:;"></a>
</div>
<script>
let backtop = document.querySelector('.backtop')
window.addEventListener('scroll', function () { //页面滚动检测
let num = document.documentElement.scrollTop
console.log(num)
if (num >= 500) {
backtop.style.display = 'block';
}
else {
backtop.style.display = 'none';
}
})
//不要写在里面,效率低(滚动依次监听一次)
backtop.children[1].addEventListener('click', function () {
document.documentElement.scrollTop = 0
})
</script>
</body>
offset家族(offset dimensions偏移尺寸)
- 获取宽高:
获取元素的自身宽高、包含元素自身设置的宽高、padding
、border
offsetWidth
和offsetHeight
- 获取位置:
获取元素距离自己定位父级元素的左、上距离
offsetLeft
和offsetTop
注意是只读属性(非要给值就用margin-top,margin-left
或者定位中的top和left
)
1.offsetWidth
和offsetHeight
是得到元素什么的宽高?
内容 + padding + border
2.offsetTop
和offsetLeft
得到位置以谁为准?
(1)带有定位的父级
(2)如果都没有则以文档左上角 为准
电梯导航案例部分代码:
// 1. 获元取素
let items = document.querySelectorAll('.item')
// 内容的盒子获取
let neirongs = document.querySelectorAll('.neirong')
// 2. 左侧aside 模块 点击谁,谁高亮
for (let i = 0; i < items.length; i++) {
items[i].addEventListener('click', function () {
// 找到上一个active 移除类
document.querySelector('.aside .active').classList.remove('active')
// 点击谁谁添加类
this.classList.toggle('active')
// 3. 右侧内容跟随走动 让页面滚动到对应的offsetTop值位置
// console.log(neirongs[i].offsetTop) 不用给单位
document.documentElement.scrollTop = neirongs[i].offsetTop
})
}
client家族(client dimensions客户端尺寸)
浏览器背景颜色改变案例部分代码
window.addEventListener('resize', function () { //resize 监听浏览器可是窗口变化
let w = document.documentElement.clientWidth
console.log(w)
if (w >= 1920) { //浏览器可视窗口clientWidth发生变化则背景颜色改变
document.body.style.backgroundColor = 'blue'
}
else if (w > 540) {
document.body.style.backgroundColor = 'hotpink'
}
else {
document.body.style.backgroundColor = 'red'
}
})
总结
// scrollWidth scrollHeight 内容 宽高 (了解)
let div = document.querySelector('div')
console.log(div.scrollWidth) // 150 不带单位
console.log(div.scrollHeight) // 336 不带单位
console.log('----------------------------')
// offset 盒子元素的大小 = 盒子本身的宽度和高度 + padding + border
console.log(div.offsetWidth) // 150 不带单位
console.log(div.offsetHeight) // 150 不带单位
// console.log(div.offsetTop) //
// console.log(div.offsetLeft)
// client 当前可视区域 不包含滚动条 边框等等
console.log('----------------------------')
console.log(div.clientWidth)
console.log(div.clientHeight)
console.log(div.clientTop) // 边框的宽度 了解
console.log(div.clientLeft)