DOM05~
滚动事件和加载事件
滚动事件
加载事件
滚动事件
-
什么是滚动事件？
1.1 当页面进行滚动时触发的事件
1.2 作用：网页需要检测用户把页面滚动到某个区域后做一些处理
1.3 事件名：scroll
-
监听整个页面滚动
2.1 给 window 或 document 添加 scroll 事件
-
监听某个元素的内部滚动直接给某个元素加即可
-
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height:3000px;
}
div{
width:100%;
height:2000px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div></div>
<script>
// 页面滚动 事件监听
// 监听 某个元素
let div = document.querySelector('div')
div.addEventListener('scroll', function() {
console.log(111);
})
// 监听页面
window.addEventListener('scroll', function() {
console.log(111);
})
</script>
</body>
</html>
加载事件
-
什么是加载事件？
1.1 加载外部资源（如图片、外联CSS、JavaScript）加载完毕时触发的事件
1.2 作用：
-
有时候需要页面资源全部处理完了做一些事情
-
老代码喜欢把 script 卸载 head 中，这时候直接找 dom 元素找不到
1.3 事件名：load(2 --> 3) / 事件名：DOMContentLoaded(4 --> 5)
-
-
监听页面所有资源加载完毕
-
给 window 添加 load 事件
-
-
监听某个元素的内部滚动直接给某个元素加即可
-
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
-
监听页面 DOM 加载完毕
-
给 document 添加 DOMContentLoaded 事件
-
-
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 输出结果为 null
// let div = document.querySelector('div')
// console.log(div);
// 为 页面 添加 load事件监听
window.addEventListener('load', function() {
let div = document.querySelector('div')
console.log(div);
})
</script>
</head>
<body>
<div>
我是一个盒子
</div>
</body>
</html>
元素大小和位置
scroll 家族
offset 家族
client 家族
网页特效
scroll 家族
-
获取宽高
-
元素 内容 高度/宽度的一种度量
-
scrollWidth scrollHeight
-
它包含含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如 ：：before或 ：：after。
-
只读属性
-
-
获取位置
-
可以获取或设置一个元素的内容水平/垂直滚动的像素数
-
scrollLeft scrollTop
-
这两个属性时可以修改的
-
-
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height:3000px;
background-color: pink;
}
button{
position: fixed;
top: 400px;
right:18px;
display:none;
}
.active{
display:block;
}
</style>
</head>
<body>
<div></div>
<button>返回顶部</button>
<script>
// 获取元素
let btn = document.querySelector('button')
// 页面滚动事件
window.addEventListener('scroll',function() {
if (document.documentElement.scrollTop >= 400) {
btn.classList.add('active')
}else{btn.classList.remove('active')}
})
// 点击链接 返回顶部
btn.addEventListener('click', function() {
document.documentElement.scrollTop = 0
})
</script>
</body>
</html>
offset 家族
-
获取宽高
-
返回一个 元素 的布局高度/宽度
-
offsetWidth offsetHeight
-
包含元素的边框 (border)、水平线上的内边距 (padding)、竖直/水平方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的高度/宽度 (width) 的值。
-
只读属性
-
-
获取位置
-
返回当前元素左上角相对于 offsetParent 元素的左边界偏移的像素值。
-
返回当前元素相对于其 offsetParent 元素的顶部内边距的像素值。
-
offsetLeft offsetTop
-
只读属性
-
-
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
header{
width:100%;
height:48px;
background-color: pink;
margin-top: -48px;
position: fixed;
}
section{
width:80%;
height:2000px;
background-color: blue;
margin:auto;
}
div{
position: absolute;
top:400px;
background-color: aqua;
}
</style>
</head>
<body>
<header>
我是顶部导航栏
</header>
<section>
<div>看到显示导航</div>
</section>
<script>
// 获取元素
let header = document.querySelector('header')
let div = document.querySelector('div')
// 设置 滚动 事件监听
window.addEventListener('scroll', function() {
if (document.documentElement.scrollTop >= div.offsetTop){
console.log(document.documentElement.scrollTop >= div.offsetTop);
header.style.marginTop = '0px'
}else{header.style.marginTop = '-48px'}
})
</script>
</body>
</html>
client 家族
-
获取宽高
-
表示元素的内部高度/宽度，以像素计
-
clientWidth clientHeight
-
该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
-
只读属性
-
-
获取位置
-
一个元素顶部边框/左边框的宽度（以像素表示）
-
clientTop clientLeft
-
不包括顶部外边距或内边距
-
只读属性
-
-
窗口尺寸改变时触发事件
-
resize
-
window.addEventListener('resize', function(){//执行代码})
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('resize', function() {
console.log(111);
})
</script>
</body>
</html>
三大家族获取宽高对比 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding:0;
margin:0;
}
div{
width:150px;
height:150px;
background-color: pink;
overflow: auto;
}
</style>
</head>
<body>
<div>
这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
这是一个盒子<br>这是一个盒子<br>这是一个盒子<br>
</div>
<script>
let div = document.querySelector('div')
// scrollWidth scrollHeight
console.log('scrollWidth scrollHeight');
console.log(div.scrollWidth);
console.log(div.scrollHeight);
// offsetWidth offsetHeight
console.log('offsetWidth offsetHeight');
console.log(div.offsetWidth);
console.log(div.offsetHeight);
// clientWidth clientHeight
console.log('clientWidth clientHeight');
console.log(div.clientWidth);
console.log(div.clientHeight);
</script>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY