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>
DOM05~的更多相关文章
- eCharts_基于eCharts开发的一个多图表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- ArcObjects SDK开发 017 在ArcObject SDK 中使用Toolbox
1.Geoprocessor和IGPProcess Geoprocessor是ArcObjects SDK中定义Tool执行器.IGPProcess接口是ArcObjects SDK中定义的ArcTo ...
- 第二章 --------------------XAML基础
1.XAML是什么? XAML是扩展标记语言,是为了方便设计人员设计UI界面.具体关于XAML语法的讲解参考其他相关书籍. XAML每一个标签以<>开头,以</>结尾,作为标 ...
- C++11(列表初始化+变量类型推导+类型转换+左右值概念、引用+完美转发和万能应用+定位new+可变参数模板+emplace接口)
列表初始化 用法 在C++98中,{}只能够对数组元素进行统一的列表初始化,但是对应自定义类型,无法使用{}进行初始化,如下所示: // 数组类型 int arr1[] = { 1,2,3,4 }; ...
- 使用IDEA创建一个maven的web项目并部署到tomcat上
目录 1.创建一个maven项目 2.为项目添加配置文件 3.创建一些类和jsp页面 4.将项目部署到tomcat 1.创建一个maven项目 打开IDEA,File--New--Project 选择 ...
- Typora + PicGo + B2 Cloud Storage 实现个人免费图床
前言 22年底终于购入了Typora,想着之前使用时候的痛点就是在图片管理这一块. 我尝试过使用在线的图床工具进行图片上传再将链接放入Typora,但说实话非常麻烦. 也尝试过就将图片保存在本地,但当 ...
- Proxyless Mesh 在 Dubbo 中的实践
背景 随着 Dubbo 3.1 的 release,Dubbo 在云原生的路上又迈出了重要的一步.在这个版本中添加了 Proxyless Mesh 的新特性,Dubbo Proxyless Mesh ...
- [OpenCV实战]5 基于深度学习的文本检测
目录 1 网络加载 2 读取图像 3 前向传播 4 处理输出 3结果和代码 3.1结果 3.2 代码 参考 在这篇文章中,我们将逐字逐句地尝试找到图片中的单词!基于最近的一篇论文进行文字检测. EAS ...
- [随笔所想] CSDN认证博客专家申请通过随笔所想
本篇博客写于2020年5月13日晚,为了纪念CSDN博客专家申请通过. 2020年5月10日晚,也就是2020年的母亲节当晚提交了博客专家申请.在2020年5月13日上午,就知道博客专家申请通过啦!前 ...
- 【Python】pip的镜像安装异常解决方案
在安装pip的出现异常提示: ERROR: Could not find a version that satisfies the requirement pillow (from versions: ...
- VUE Angular通用动态列表组件-亦可为自动轮播组件-01-根据数据量自动纵向滚动,鼠标划入停止滚动
本文为纵向轮播,横向轮播/动态列表组件请戳---- 代码是angular的,稍微改改就可以放入Vue项目里,差别不大哟 以下代码可以根据实际情况自行调整 父组件html <app-scroll- ...