【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.scrollTopconsole.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.scrollTopif (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)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/75256.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！