目录
前言
页面加载事件和页面滚动事件
页面加载事件
load事件
语法
注意
DOMContentLoaded事件
语法
总结
页面加载事件有哪两个?如何添加?
load 事件
DOMContentLoaded事件
页面滚动事件
存在原因
scroll监听整个页面滚动
页面滚动事件-获取位置
scrollLeft和scrollTop（属性）
示例代码
1.被卷去的头部或者左侧用那个属性?是否可以读取和修改?
2.检测页面滚动的头部距离(被卷去的头部)用那个属性?
示例项目：显示导航和返回顶部案例
总结
前言
醉后不知天在水，满船清梦压星河
页面加载事件和页面滚动事件
页面加载事件
加载外部资源（如图片，外联CSS和JavaScript）完毕后触发的事件
存在原因有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
load事件
监听页面所有资源加载完毕
语法
window.addEventListener('load',function(){//添加事件})注意
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
DOMContentLoaded事件
在 HTML 文档的初始解析完成后立即触发。
语法
document.addEventListener('DOMContentLoaded', function () {})总结
页面加载事件有哪两个?如何添加?
load 事件
监听整个页面资源给 window 加
DOMContentLoaded事件
给document 加无需等待样式表、图像等完全加载
页面滚动事件
滚动条在滚动的时候持续触发的事件
存在原因
很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
事件名
scroll监听整个页面滚动
window.addEventListener(‘scroll’.function(){ }给window或document添加scroll事件
页面滚动事件-获取位置
scrollLeft和scrollTop（属性）
获取被卷去的大小获取元素内容往左、往上滚出去看不到的距离，这两个值是可读写的
overflow：scrool/auto
可以给盒子加滚动属性
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面滚动事件示例</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;height: 2000px;/* 设置一个较大的高度以便于滚动 */}
.scroll-top {position: fixed;bottom: 20px;right: 20px;display: none;background-color: #007BFF;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;z-index: 1000;}
.scroll-top:hover {background-color: #0056b3;}</style>
</head>
<body><h1>页面滚动事件示例</h1><p>滚动页面以查看效果。</p><button class="scroll-top" id="scrollTopButton">回到顶部</button>
<script>document.addEventListener('DOMContentLoaded', function () {const scrollTopButton = document.getElementById('scrollTopButton');
// 监听滚动事件window.addEventListener('scroll', function () {// 获取当前滚动位置const scrollPosition = window.scrollY || document.documentElement.scrollTop;
// 如果滚动位置大于 200 像素，显示回到顶部按钮if (scrollPosition > 200) {scrollTopButton.style.display = 'block';} else {scrollTopButton.style.display = 'none';}});
// 回到顶部按钮点击事件scrollTopButton.addEventListener('click', function () {window.scrollTo({top: 0,behavior: 'smooth' // 平滑滚动});});});</script>
</body>
</html>1.被卷去的头部或者左侧用那个属性?是否可以读取和修改?
scrollTop /scrollLeft可以读取，也可以修改(赋值)
2.检测页面滚动的头部距离(被卷去的头部)用那个属性?
document.documentElement.scrollTop
示例项目：显示导航和返回顶部案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>侧边栏和返回顶部示例</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;height: 2000px;/* 设置一个较大的高度以便于滚动 */}
.sidebar {position: fixed;top: 0;left: -200px;width: 200px;height: 100%;background-color: rgba(173, 216, 230, 0.5);/* 浅蓝半透明 */transition: left 0.3s ease;padding: 20px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.sidebar.show {left: 0;}
.sidebar ul {list-style-type: none;padding: 0;}
.sidebar ul li {margin-bottom: 10px;padding: 5px 0;transition: background-color 0.3s ease;}
.sidebar ul li a {text-decoration: none;color: #333;font-size: 16px;display: block;padding: 5px 10px;}
.sidebar ul li:hover {background-color: rgba(144, 238, 144, 0.5);/* 浅绿半透明 */}
.scroll-top {position: fixed;bottom: 20px;right: 20px;display: none;background-color: #007BFF;color: white;padding: 10px 20px;border: none;border-radius: 5px;cursor: pointer;z-index: 1000;}
.scroll-top:hover {background-color: #0056b3;}
.content {margin-left: 60px;padding: 20px;margin-top: 60px;/* 确保内容不会被固定的侧边栏遮挡 */}
h1 {margin-top: 50px;}</style>
</head>
<body><div class="sidebar" id="sidebar"><ul><li><a href="#section1">Section 1</a></li><li><a href="#section2">Section 2</a></li><li><a href="#section3">Section 3</a></li></ul></div>
<button class="scroll-top" id="scrollTopButton">回到顶部</button>
<div class="content"><h1 id="section1">Section 1</h1><p>内容...</p><h1 id="section2">Section 2</h1><p>内容...</p><h1 id="section3">Section 3</h1><p>内容...</p></div>
<script>document.addEventListener('DOMContentLoaded', function () {const sidebar = document.getElementById('sidebar');const scrollTopButton = document.getElementById('scrollTopButton');
// 监听滚动事件window.addEventListener('scroll', function () {// 获取当前滚动位置const scrollPosition = window.scrollY || document.documentElement.scrollTop;
// 如果滚动位置大于 200 像素，显示侧边栏和回到顶部按钮if (scrollPosition > 200) {sidebar.classList.add('show');scrollTopButton.style.display = 'block';} else {sidebar.classList.remove('show');scrollTopButton.style.display = 'none';}});
// 回到顶部按钮点击事件scrollTopButton.addEventListener('click', function () {window.scrollTo({top: 0,behavior: 'smooth' // 平滑滚动});});});</script>
</body>
</html>总结
欲将轻骑逐，大雪满弓刀
