当前位置：首页 > article >正文

前端学习-页面加载事件和页面滚动事件(三十二）

article 2026/4/28 10:50:55

前言

页面加载事件和页面滚动事件

页面加载事件

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>

总结

欲将轻骑逐，大雪满弓刀

前端学习-页面加载事件和页面滚动事件(三十二）

目录前言页面加载事件和页面滚动事件页面加载事件 load事件语法注意 DOMContentLoaded事件语法总结页面加载事件有哪两个?如何添加? load 事件 DOMContentLoaded事件页面滚动事件存在原因 scroll监听整个页面滚动页面滚动事件-获取位置 scrollLef…...

编程日记 2026/4/21 9:07:28

C++：将函数参数定义为const T的意义

C++很多函数的参数都会定义为const T&，那么这么做的意义是什么呢？避免拷贝：通过引用传递参数而不是值传递，可以避免对象的拷贝，从而提高性能，特别是当对象较大时。保护数据：使用const关键字可以防止函数修改传入的参数，确保数据的安全性和一致性。对于保护数据这…...

编程日记 2026/4/5 9:26:13

Formily 如何进行表单验证

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2026/4/11 23:14:27

安宝特方案 | AR眼镜：远程医疗的“时空折叠者”，如何为生命争夺每一分钟？

行业痛点：当“千里求医”遇上“资源鸿沟” 20世纪50年代，远程会诊的诞生曾让医疗界为之一振——患者不必跨越山河，专家无需舟车劳顿，一根电话线、一张传真纸便能架起问诊的桥梁。然而，传统远程医疗的局限也日益凸显&a…...

编程日记 2026/4/11 21:24:57

使用git commit时‘“node“‘ 不是内部或外部命令，也不是可运行的程序

第一种： 使用git commit -m "xxx"时会报错，我看网上的方法是在命令行后面添加--no-verify：git commit -m "主题更新" --no-verify，但是不可能每次都添加。最后解决办法是：使用git config --lis…...

编程日记 2026/4/11 23:18:45

Python分享20个Excel自动化脚本

在数据处理和分析的过程中，Excel文件是我们日常工作中常见的格式。通过Python，我们可以实现对Excel文件的各种自动化操作，提高工作效率。本文将分享20个实用的Excel自动化脚本，以帮助新手小白更轻松地掌握这些技能。 1. Excel单…...

编程日记 2026/3/2 7:05:47

nodejs - vue 视频切片上传，本地正常，线上环境导致磁盘爆满bug

nodejs 视频切片上传，本地正常，线上环境导致磁盘爆满bug 原因： 然后在每隔一分钟执行du -sh ls ，发现文件变得越来越大，即文件下的mp4文件越来越大最后导致磁盘直接爆满排查原因 1、尝试将m3u8文件夹下的所有视…...

编程日记 2026/4/11 21:24:33

瑞友天翼应用虚拟化系统 GetPwdPolicy SQL注入漏洞复现

免责声明本文旨在提供有关特定漏洞的深入信息，帮助用户充分了解潜在的安全风险。发布此信息的目的在于提升网络安全意识和推动技术进步，未经授权访问系统、网络或应用程序，可能会导致法律责任或严重后果。因此，作者不对读者基于本文内容所采取的任何行为承担责任。读者在使…...

编程日记 2026/4/14 1:10:00

【MySQL — 数据库基础】深入解析MySQL的聚合查询

1. 聚合查询 1.1 聚合函数函数说明COUNT ( [DISTINCT] expr)返回查询到的数据的数量( 行数 )SUM ( [DISTINCT] expr)返回查询到的数据的总和，不是数字没有意义AVG ( [DISTINCT] expr)返回查询到的数据的平均值，不是数字没有意义MAX( [DISTINCT] expr)…...

编程日记 2026/4/11 21:24:47

22.3、IIS安全分析与增强

目录 IIS安全威胁分析iis安全机制iis安全增强 IIS安全威胁分析 iis是微软公司的Web服务软件，主要提供网页服务，除此之外还可以提供其他服务，第一个最主要的是网页服务，第二个是SMTP邮件服务，第三个是FTP文件传输服务。…...

编程日记 2025/5/25 6:54:22

windows平台本地部署DeepSeek大模型+Open WebUI网页界面（可以离线使用）

环境准备：确定部署方案请参考：DeepSeek-R1系列（1.5b/7b/8b/32b/70b/761b）大模型部署需要什么硬件条件-CSDN博客根据本人电脑配置：windows11 + i9-13900HX+RTX4060+DDR5 5600 32G内存确定部署方案：DeepSeek-R1:7b + Ollama + Open WebUI 1. 安装 Ollama Ollama 是一…...

编程日记 2026/4/19 3:17:51

港中文腾讯提出可穿戴3D资产生成方法BAG，可自动生成服装和配饰等3D资产如，并适应特定的人体模型。

今天给大家介绍一种名为BAG（Body-Aligned 3D Wearable Asset Generation）的新方法，可以自动生成可穿戴的3D资产，如服装和配饰，以适应特定的人体模型。BAG方法通过构建一个多视图图像扩散模型，生成与人体对齐…...

编程日记 2026/4/11 16:37:30

【人工智能】Python中的序列到序列（Seq2Seq）模型：实现机器翻译

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界序列到序列（Seq2Seq）模型是自然语言处理（NLP）中一项核心技术，广泛应用于机器翻译、语音识别、文本摘要等任务。本文深入探讨Seq2Seq模…...

编程日记 2026/4/28 10:02:37

34.日常算法

1.合并区间题目来源以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间，并返回一个不重叠的区间数组，该数组需恰好覆盖输入中的所有区间。示例 1： 输入&#x…...

编程日记 2026/4/11 16:12:46

DeepSeek深度思考：客户端（Android/iOS）架构设计指南

目标读者：中高级开发者、架构师适用场景：大型复杂应用开发、跨团队协作、长期维护迭代一、架构设计核心原则 1.模块化（Modularization） 横向拆分：按功能边界划分（如登录、支付、消息模块）纵向…...

编程日记 2026/2/24 7:14:51

2025 年前端开发现状分析：卷疯了还是卷麻了？

一、前端现状：框架狂飙，开发者崩溃如果你是个前端开发者，那么你大概率经历过这些场景： 早上打开 CSDN（或者掘金，随便），发现又有新框架发布了，名字可能是 VueXNext.js 之…...

编程日记 2026/2/28 21:15:32

数据库绪论

目录数据库基本概念一.基本概念 1.信息 2.数据 3.数据库（DB） 4.数据库管理系统（DBMS） 5.数据库系统（DBS） 二.数据管理技术的发展 1.人工管理阶段 2.文件系统阶段 3.数据库系统阶段 4.数据库管…...

编程日记 2026/4/15 10:37:24

【AIGC魔童】DeepSeek v3提示词Prompt书写技巧

【AIGC魔童】DeepSeek v3提示词Prompt书写技巧 （1）基础通用公式（适用80%场景）（2）问题解决公式（决策支持）（3）创意生成公式（4）学习提升公…...

编程日记 2026/4/14 1:21:22

一、获取镜像 docker pull farerboy/rabbitmq:3.9.9 二、运行镜像 docker run -d --name rabbitmq \n --hostname rabbitmq \n -p 15672:15672/tcp \n -p 5672:5672/tcp \n -v /wwwroot/opt/docker/rabbitmq:/var/lib/rabbitmq \n farerboy/rabbitmq:3.9.9 备注：…...

编程日记 2026/2/21 13:15:50

【‌Unity】Unity中物体的static属性作用

‌Unity中物体的static属性主要用于优化游戏性能和简化渲染过程。‌ Unity中物体的static属性的作用优化渲染性能‌：当物体被标记为static时，Unity会在游戏运行时将其视为静止的物体，这意味着这些物体的渲染信息不会随着每一帧的更新而变化…...

编程日记 2026/2/18 16:16:40

网络编程基础1

七层协议模型和四层协议模型七层协议模型：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层四层协议模型：链路层、网络层、传输层、应用层 TCP通信流程服务器端 (1)创建socket(socket) (2)绑定自己的IP(bind) (3)监听客户端连接(liste…...

编程日记 2026/4/28 9:55:16

跨越边界，大模型如何助推科技与社会的完美结合？

点击蓝字关注我们 AI TIME欢迎每一位AI爱好者的加入！ 概述 2024年，大模型技术已成为人工智能领域的焦点。这不仅仅是一项技术进步，更是一次可能深刻影响社会发展方方面面的变革。大模型的交叉能否推动技术与社会的真正融合？2025年…...

编程日记 2026/4/11 21:24:35

kafka生产端之架构及工作原理

文章目录整体架构元数据更新整体架构消息在真正发往Kafka之前，有可能需要经历拦截器（Interceptor）、序列化器（Serializer）和分区器（Partitioner）等一系列的作用，那么在此之后又会…...

编程日记 2026/4/11 8:13:47

在 Windows 上使用 ZIP 包安装 MySQL 的详细步骤

以下是使用官方 ZIP 包在 Windows 上安装 MySQL 的详细步骤，确保能通过 mysql -uroot -p 成功连接。步骤 1：下载 MySQL ZIP 包访问 MySQL 官方下载页面： https://dev.mysql.com/downloads/mysql/选择 Windows (x86, 64-bit), ZIP Archive&…...

编程日记 2026/4/23 2:20:25

【web自动化】指定chromedriver以及chrome路径

selenium自动化，指定chromedriver，以及chrome路径对应这篇文章，可以点击查看，详情 from selenium import webdriverdef get_driver():# 获取配置对象option webdriver.ChromeOptions()option.add_experimental_option("de…...

编程日记 2026/2/21 1:26:48

记录 | WPF创建和基本的页面布局

目录前言一、创建新项目注意注意点1注意点2 解决方案名称和项目名称二、布局2.1 Grid2.1.1 RowDefinitions 行分割2.1.2 Row & Column 行列定位区分 2.1.3 ColumnDefinitions 列分割 2.2 StackPanel2.2.1 Orientation 修改方向三、模板水平布局【Grid中套StackPanel】中…...

编程日记 2026/4/26 20:47:04