滚动事件
-
事件名：scroll
-
当页面进行滚动时触发的事件
-
网页检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏、返回顶部
-
//监听整个页面滚动 //给window或document添加scroll事件 window.addEventListener('scroll',function(){ //执行的操作 }) -
监听某个元素的内部滚动直接给某个元素加即可
加载事件
-
事件名：load
-
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
-
监听页面所有资源加载完毕
-
//页面加载事件 //给window添加load事件 window.addEventListener('load',function(){ //执行的操作 }) -
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
-
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
-
事件名：DOMContentLoaded
-
监听页面DOM加载完毕
-
//给document添加DOMContentLoaded document.addEventListener('DOMContentLoaded',function(){ //执行的操作 })
元素大小位置（三大家族）
- scroll家族
- offset家族
- client家族
scroll家族
- 使用场景： 我们想要页面滚动一段距离，比如100px，就让某些元素 显示隐藏，那我们怎么知道，页面滚动了100像素呢？ 就可以使用scroll 来检测页面滚动的距离~~~
- 获取宽高
- 获取元素的内容总宽高（不包含滚动条）返回值不带单位
- scrollWidth和scrollHeight
- 获取位置
- 获取元素内容往左、往上滚出去看不到的距离
- scrollLeft和scrollTop
- 这两个属性是可以修改的
-
在开发时，经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个像素，或者固定一个元素
-
window.addEventListener('scroll',function(){ let num = document.documentElement.scrollTop //documentElement返回的是HTML元素 console.log(num) })document.documentElement HTML 文档返回对象为HTML元素
点击返回顶部案例
<!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
}
body {
height: 3000px;
}
.top {
width: 50px;
height: 100px;
background-color: pink;
position: fixed;
bottom: 100px;
right: 100px;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div class="top">点击返回顶部</div>
<script>
let tops = document.querySelector('.top')
window.addEventListener('scroll', function(){
//如果scrollTop大于500则显示
if ( document.documentElement.scrollTop >= 500) {
tops.style.display = 'block'
tops.addEventListener('click',function(){
document.documentElement.scrollTop = 0
})
//否则 则隐藏返回顶部按钮
} else {
tops.style.display = 'none'
}
})
</script>
</body>
</html>
offset家族
- 获取宽高
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetWidth和offsetHeight
- 获取位置
- 获取元素距离自己定位父级元素的左、上距离
- offsetLeft和offsetTop 注意是只读属性
固定导航栏案例
<!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;
box-sizing: border-box;
}
.top {
width: 100%;
height: 80px;
background-color: #666;
position: fixed;
top: -80px;
left: 0;
transition: all .3s;
z-index: 2;
}
.box {
width: 900px;
height: 2000px;
background-color: rgb(231, 224, 224);
margin: 0 auto;
}
.box .txt {
width: 300px;
height: 300px;
background-color: pink;
float: left;
margin-top: 500px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="box">
<div class="txt">1234567</div>
</div>
<script>
let tops = document.querySelector('.top')
let txts = document.querySelector('.txt')
window.addEventListener('scroll', function(){
//如果scrollTop的值大于offsetTop的值就显示顶部导航栏
if (document.documentElement.scrollTop >= txts.offsetTop){
tops.style.top = '0'
//否则就隐藏导航栏
} else {
tops.style.top = '-80px'
}
})
</script>
</body>
</html>
电梯导航案例
<!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: 0;
padding: 0;
}
body {
height: 3000px;
}
.aside {
position: fixed;
left: 0;
top: 50%;
}
.item {
height: 40px;
line-height: 40px;
text-align: center;
padding: 0 10px;
cursor: pointer;
}
.active {
background-color: red;
color: #fff;
}
.content {
width: 660px;
margin: 400px auto;
}
.neirong {
height: 300px;
margin-bottom: 20px;
color: #fff;
}
.content1 {
background-color: red;
}
.content2 {
background-color: blue;
}
.content3 {
background-color: orange;
}
.content4 {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="aside">
<div class="item active">男装/女装</div>
<div class="item">儿童服装/游乐园</div>
<div class="item">电子产品</div>
<div class="item">电影/美食</div>
</div>
<div class="content">
<div class="neirong content1">男装/女装</div>
<div class="neirong content2">儿童服装/游乐园</div>
<div class="neirong content3">电子产品</div>
<div class="neirong content4">电影/美食</div>
</div>
<script>
let items = document.querySelectorAll('.item')
let neirongs = document.querySelectorAll('.neirong')
//左侧aside 模块 点击谁，谁高亮
for (let i = 0; i < items.length; i++){
items[i].addEventListener('click',function(){
// 找到上一个active 移除类
document.querySelector('.aside .active').classList.remove('active')
//点击谁就谁添加类
this.classList.add('active')
//右侧内容跟随走动 让页面滚动到对应的offsetTop值位置
document.documentElement.scrollTop = neirongs[i].offsetTop
})
}
</script>
</body>
</html>
client家族
-
获取宽高：
-
获取元素的可见部分宽高（不包含边框，滚动条等）
-
clientWidth和clientHeight
-
-
获取位置：
-
获取左边框和上边框宽度
-
clientLeft和clientTop 注意是只读属性
-
-
会在窗口尺寸改变的时候触发事件：
-
resize
-
window.addEventListener('resize',function(){ //执行的代码 })
-
-
检测屏幕宽度：
-
window.addEventListener('resize',function(){ let w = document.documentElement.clientWidth console.log(w) })
-
总结
-
offset家族
- 获取元素自身大小：包括自身设置的宽高、padding、border
- 获取元素距离定位父级的左和上距离 只读属性
-
client家族
- 获取元素可见区域的大小
- 获取元素左、上边框距离 只读属性
-
scroll家族
- 获取元素内容的总大小
- 获取元素向左向上滚出去看不见的距离 可读写属性
