【JavaScript】十八、页面加载事件和页面滚动事件
文章目录
- 1、页面加载事件
- 1.1 load
- 1.2 DOMContentLoaded
- 2、页面滚动事件
- 2.1 语法
- 2.2 获取滚动位置
- 3、案例：页面滚动显示隐藏侧边栏
1、页面加载事件
script标签在html中的位置一般在</body>标签上方，这是因为代码从上往下执行，在html元素都没加载的情况下，JS去获取DOM对象，会获取不到，如下，script标签提前，button对象就获取不到
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function() {
alert('点击了')
})
</script>
</head>
<body>
<button>点击</button>
</body>
此时，可以考虑加一个事件，等下面都加载完了，再来执行JS代码 ==> 页面加载事件 ==> 等页面资源全部处理完了再去做一些事情
1.1 load
- 事件名：load
- 作用：监听页面所有资源加载完毕，再执行回调函数
- 示例：给 window 添加 load 事件
利用页面加载事件load，可以解决开篇说到的问题：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 等待页面所有资源都加载完毕了，再执行事件都回调函数
// 这里给window添加load事件（window比document还大）
window.addEventListener('load', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert('点击了')
})
})
</script>
</head>
<body>
<button>点击</button>
</body>
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件，也就是说不一定用window：
<script>
// 如果我要等某个图片加载完毕，再去执行回调代码
img.addEventListener('load', function () {
alert('加载完成')
})
</script>
1.2 DOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载，只要html标签加载完就行
- 事件名：DOMContentLoaded
- 示例：给 document 添加 DOMContentLoaded 事件
2、页面滚动事件
很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
2.1 语法
- 事件名：scroll
- 监听整个页面滚动（不是只能给window加，监听某个元素的内部滚动直接给某个元素加即可）：
- 示例：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 平时写的html没有滚动条，因为html页面和整个浏览器窗口一样大，
这里给body加个高度变的超出窗口大小，就出现滚动条了 */
body {
height: 3000px;
}
</style>
</head>
<body>
<script>
window.addEventListener('scroll', function () {
console.log('发生滚动了～')
})
</script>
</body>
- 示例2：给div对象添加滚动事件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 100px;
width: 200px;
height: 200px;
/* 只要有滚动条，都可以添加滚动事件 */
overflow: scroll;
border: 1px solid #000;
}
</style>
</head>
<body>
<div>
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
这是很多文字
</div>
<script>
const div = document.querySelector('div')
div.addEventListener('scroll', function () {
console.log('滚动了～')
})
</script>
</body>
2.2 获取滚动位置
如下，在上面div的例子中，滚动条向下拉，文字向上走（绿色代表div盒子，红色代表文字内容），紫色线所示长度，就是被卷去的长度，即scrollTop
同理，如果是横向滚动条，就是scrollLeft，scrollTop和scrollLeft分别是获取元素内容往左、往上滚出去看不到的距离
要在scroll事件里面去获取被卷去的距离：
当然，一般获取的是页面滚动的距离，获取整个html页面，不是document.html，而是document.documentElement
由此：获取整个html页面滚动的距离：
<body>
<script>
window.addEventListener('scroll', function () {
console.log(document.documentElement.scrollTop)
})
</script>
</body>
再扩展，让这个滑动距离满足一定条件时，出现一个返回顶部👆的文字
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 3000px;
}
div {
display: none;
}
</style>
</head>
<body>
<div>
返回顶部👆
</div>
<script>
const div = document.querySelector('div')
window.addEventListener('scroll', function () {
// 这里用const没问题，局部变量，每触发一次scroll事件，执行一次回调函数，对应一个局部变量n
// 获取整个页面滑动的距离
const n = document.documentElement.scrollTop
console.log(n)
if (n >= 1) { // 这里给个1，给太大了，等生效的时候，文字已经滑上去了，出来了也看不到效果
div.style.display = 'block'
} else {
// 滚动条拉上去后再隐藏
div.style.display = 'none'
}
})
</script>
</body>
</html>
最后，scrollTop和scrollLeft这两个值是数值型，可读可写，可写即用于实现页面一打开就在中间，或者实现返回顶部，一点就给这个值赋0
// 实现页面一打开就在中间
<script>
document.documentElement.scrollTop = 800
//...
</script>
3、案例：页面滚动显示隐藏侧边栏
需求：
- 当页面滚动大于300像素的距离时候，就显示电梯侧边栏（叫电梯是因为点击下图中的每一楼选项，会直接跳到对应位置），否则隐藏
- 点击电梯里的“顶部”，页面回到顶部
关键代码：
//...html略
</div>
</div>
<!-- 电梯 -->
<div class="xtx-elevator">
<ul class="xtx-elevator-list">
<li><a href="javascript:;" data-name="new">新鲜好物</a></li>
<li><a href="javascript:;" data-name="popular">人气推荐</a></li>
<li><a href="javascript:;" data-name="brand">热门品牌</a></li>
<li><a href="javascript:;" data-name="topic">最新专题</a></li>
<li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li>
</ul>
</div>
<script>
const elevator = document.querySelector('.xtx-elevator')
window.addEventListener('scroll', function () {
const n = document.documentElement.scrollTop
if (n >= 300) {
elevator.style.opacity = 1 // opacity即淡入淡出，温柔版的display
} else {
elevator.style.opacity = 0
}
// elevator.style.opacity = n >= 300 ? 1 : 0
// 返回顶部
const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', function () {
document.documentElement.scrollTop = 0
})
})
</script>
</body>
</html>
补充：scrollTo() 方法可把内容滚动到指定的坐标
- 语法：
元素.scrollTo(x, y) - 示例：
对这个案例来说，这两个写法都行，scrollTo方法更灵活，还可以操作横轴位置，但一般页面都是上下滚动，所以两种实现都可：
//document.documentElement.scrollTop = 0
window.scrollTo(0, 0)