DOM05~
2024-10-21 10:18:29
滚动事件和加载事件
滚动事件
加载事件
滚动事件
什么是滚动事件？
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>
最新文章
- EF中扩展出Between操作符 （修订版）
- 使用HttpDownLoadHelper下载文件
- 利用Canvas编辑图片
- vector在C++中的基本用法
- SQL初级第三课(下)
- 去掉字符串中的空格 JS JQ 正则三种不同写法
- 虚拟化之vmware虚拟机扩容与克隆
- vue.js笔记
- 制作第三方SDK静态库、.framework
- Spring注解@Component、@Repository、@Service、@Controller,@Autowired、@Resource用法
- （转）CSS字体大小: em与px、pt、百分比之间的对比
- vs生成解决方案错误无法将文件“xx.*”复制到xx.*”。对路径“bin\xx.*”的访问被拒绝
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听
- fuser命令使用心得
- springboot整合redis（简单整理）
- JavaScript中的this -- 好像很有道理版
- SPSS提示“列表中不允许存在字符串变量”的解决方法
- web.html
- k8s学习笔记之四:资源清单定义入门
- 冲刺Two之站立会议7