【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)
相关文章:
【JavaScript】十八、页面加载事件和页面滚动事件
文章目录 1、页面加载事件1.1 load1.2 DOMContentLoaded 2、页面滚动事件2.1 语法2.2 获取滚动位置 3、案例:页面滚动显示隐藏侧边栏 1、页面加载事件 script标签在html中的位置一般在</body>标签上方,这是因为代码从上往下执行,在htm…...
Solana链开发全景指南:从环境搭建到生态实践
——2025年高性能区块链开发技术栈深度解析 一、Solana核心优势与技术特性 1. 突破性技术架构 历史证明(PoH):通过时间戳序列化交易,实现并行处理能力,支持5万TPS的吞吐量 并行执行引擎(Sealevel…...
这是一个文章标题
# Markdown 全语法示例手册本文档将全面演示 Markdown 的语法元素,包含 **标题**、**列表**、**代码块**、**表格**、**数学公式** 等 18 种核心功能。所有示例均附带实际应用场景说明。---## 一、基础文本格式### 1.1 标题层级 markdown # H1 (使用 #) ## H2 (使用…...
预言机与数据聚合器:DeFi的数据桥梁与风险博弈
一、核心机制与价值定位 预言机(Oracle)与数据聚合器是DeFi生态的“数据基建层”,解决链上-链下数据互通与链上数据可读性两大问题: 数据输入层(预言机):将现实世界数据(价格、天气…...
通过百度OCR在线API识别带水印扫描图片文字
目录 0 环境准备 1 百度OCR API申请 1.1 登录百度智能云 1.2 创建应用 1.3 获取API key和secret key 2 创建项目python环境 2.1 conda创建python环境 2.2 在pycharm中创建项目 2.3 激活python环境 2.4 安装项目依赖包 3 程序逻辑实现 3.1 导入依赖包 3.2 定义百度k…...
ocr python库
ocr python库 上手Git、Gitee和Github!watt toolkit...
Node 处理 request 的过程中,都会更新哪些 metadata 和 property
什么是 Metadata? 用于描述帧状态、控制参数、处理结果等 是随 request 流动的结构,通常是 PerFrameMetaData,每一帧一份 属于 HAL3 metadata 树的组成部分 什么是 Property? 是 CamX 内部定义的一种帧级别的轻量信息块 不一…...
基于labview的多功能数据采集系统
基于labview的多功能数据采集系统(可定制功能) 包含基于NI温度采集卡。电流采集卡。电压采集卡的数据采集功能 数据存储 报表存储 数据处理与分析 生产者消费者架构 有需要可联系...
李沐《动手学深度学习》 | 线性神经网络-线性回归
文章目录 线性回归1.确定模型2.衡量预估质量-损失函数3.深度学习的基础优化算法随机梯度下降小批量随机梯度下降 从线性回归到深度网络 线性回归从0开始实现构造一个人造数据集创建数据集可视化数据集 读取数据-随机抽取样本模型定义模型参数初始化定义模型定义损失函数定义优化…...
LabVIEW 中 “Flatten To Json String” VI 应用及优势
在 LabVIEW 开发涉及机器人数据等场景时,常需将数据以特定 JSON 格式输出。“Flatten To Json String” VI 在此过程中能发挥重要作用,相比 LabVIEW 系统自带的 JSON 处理方式,它具备独特优势。以下将介绍其获取、使用方法及相较系统自带方式…...
关于 Spring Boot 后端项目使用 Maven 打包命令、JAR/WAR 对比、内嵌服务器与第三方服务器对比,以及热部署配置的详细说明
以下是关于 Spring Boot 后端项目使用 Maven 打包命令、JAR/WAR 对比、内嵌服务器与第三方服务器对比,以及热部署配置的详细说明: 一、Maven 打包命令详解 1. 基础命令 1.1 清理并打包 mvn clean packageclean:删除 target 目录中的旧构建文…...
用labview写crc8校验
crc8校验有好几种,我这里写的是不带任何后缀的crc8。 首先,我们百度一下crc8的计算方式 一般搜索出来下面还有c语言写的crc8可以做为参考。 下面便是根据百度的计算方式写的crc8,已校验过,无问题。 写完后,可以输入下…...
阿里云CDN与DCDN主动推送静态资源至边缘服务器的ASP.NET WEB实例
一、CDN,需要调用PushObjectCache接口进行URL预热,以下是操作步骤: 1. 准备工作 首先,安装阿里云SDK NuGet包: Install-Package Aliyun.NET.SDK.CDN -Version 3.0.0 Install-Package Aliyun.NET.SDK.Core -Version 3.0.0 2. 创建ASP.NET Web页面代码 CDNPreheat.aspx…...
LangChain-提示模板 (Prompt Templates)
提示模板是LangChain的核心组件,用于构建发送给语言模型的输入。本文档详细介绍了提示模板的类型、功能和最佳实践。 概述 提示工程是使用大型语言模型的关键技术。通过精心设计的提示,可以显著提高模型的输出质量和相关性。LangChain的提示模板系统提…...
多线程中的互斥与同步
多线程中的互斥与同步 1. 互斥与同步的区别 互斥:确保某一资源在同一时刻只能被一个线程访问。其主要目的是保证资源的唯一性和排他性,但无法控制访问的顺序。同步:在互斥的基础上,进一步通过其他机制保证访问资源的有序性。 2…...
ValueError: Cannot handle batch sizes > 1 if no padding token is defined`
ValueError: Cannot handle batch sizes > 1 if no padding token is defined` batch sizes > 1 进行掩码填充:pad_token,eos_token 在处理自然语言处理任务时,尤其是在使用批量数据进行训练或推理时,经常需要对输入文本进行填充(padding),以确保每个输入序列具…...
Gemma 3模型:Google 开源新星,大语言模型未来探索
🐇明明跟你说过:个人主页 🏅个人专栏:《深度探秘:AI界的007》 🏅 🔖行路有良友,便是天堂🔖 目录 一、引言 1、快速发展的AI世界:为何关注Gemma 3&#x…...
先占个日常,等会写。
引入一个重要的概念 “struct” (译为中文:结构体) 可用作设出比较复杂的一些变量类型 语法 :struct point name { int x; int y; int z;} point 和 name是任意命名的名字,含义是,声明一个变量类型为st…...
PyTorch Tensor维度变换实战:view/squeeze/expand/repeat全解析
本文从图像数据处理、模型输入适配等实际场景出发,系统讲解PyTorch中view、squeeze、expand和repeat四大维度变换方法。通过代码演示对比不同方法的适用性,助您掌握数据维度调整的核心技巧。 一、基础维度操作方法 1. view:内存连续的形状重…...
212、【图论】字符串接龙(Python)
题目描述 题目链接:110. 字符串接龙 代码实现 import collectionsn int(input()) beginStr, endStr input().split() strList [input() for _ in range(n)]deque collections.deque() # 使用队列遍历结点 deque.append([beginStr, 1]) # 存储当前字符串和遍…...
土堆教程笔记【PyTorch】
官网:torch — PyTorch 2.6 documentation Pycharm 解释器 一般搞深度学习都用虚拟环境的解释器,为了满足不同的项目所需要的不同的包的版本。 1. system interpreter表示本地的解释器 也就是你电脑系统里安装的解释器 2. Virtual Environment—Py…...
【今日三题】小乐乐改数字 (模拟) / 十字爆破 (预处理+模拟) / 比那名居的桃子 (滑窗 / 前缀和)
⭐️个人主页:小羊 ⭐️所属专栏:每日两三题 很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~ 目录 小乐乐改数字 (模拟)十字爆破 (预处理模拟)比那名居的桃子 (滑窗 / 前缀和) 小乐乐改数字 (模拟) 小乐乐改数字…...
各类神经网络学习:(九)注意力机制(第1/4集),背景介绍,以及理解与引入
上一篇下一篇GRU(下集)注意力机制(第2/4集) Attention(注意力机制) 又叫做: attention pooling 简单来说,就是在训练的过程中,已知哪些东西更重要,哪些东西次重要。从而更…...
微软出品的AI Toolkit,在VS Code中使用DeepSeek
文章目录 简介调用DeepSeek 简介 AI Toolkit是微软出品的VS Code智能插件,整合了多种AI大模型,使之可以在VS Code中调用。 在插件栏搜索【AI Toolkit for Visual Studio Code】即可安装。安装完成后,左侧活动栏中会出现【AI Toolkit】的图标…...
随机森林与决策树
随机森林 vs 决策树: 随机森林(Random Forest)和决策树(Decision Tree)都是经典的机器学习算法,但它们在原理、性能和适用场景上有显著差异。以下是关键对比: 1. 决策树(Decision T…...
Selenium中`driver.get(htmlfile)`方法可能出现的超时问题
针对Selenium中driver.get(htmlfile)方法可能出现的超时问题,以下是几种改进方案及具体实现方法: 1. 设置页面加载超时时间 通过set_page_load_timeout()方法直接控制页面加载的最大等待时间。若超时,会抛出TimeoutException异常,…...
selenium快速入门
一、操作浏览器 from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.chrome.service import Service from selenium.webdriver.common.by import By# 设置选项 q1 Options() q1.add_argument("--no-sandbo…...
C++_智能指针
目录 一、智能指针的使用场景、基本概念 (1)因为抛异常而出现的资源泄漏的情况 二、RAII和智能指针的设计思路 三、c标准库智能指针以及使用 (1)几种智能指针的概念 auto_ptr unique_ptr shared_ptr weak_ptr 不是new出来…...
微服务简述
单体架构和微服务架构的区别? 最显著的区别看上去就是单体架构用的同一个数据库,微服务架构用的各自的数据库 单体架构: 所有功能模块(如用户管理、订单处理、支付等)都紧密耦合在一个代码库中。模块之间通过函数调用…...
研发效能实践:BDD(行为驱动开发)深度解毒手册:从「撕逼大会」到「人见人爱」的协作秘笈
引言:每个研发团队都该养一亩「黄瓜田」——论BDD如何终结「三体人」式需求沟通 🌌 「产品说登录要人脸识别,开发做成了指纹验证,测试按文档测出18个bug,最后发现原型图藏在三年前的邮件附件里…」家人们…...
【第40节】windows编程:仿造MFC版本QQ安全卫士
目录 前言 一、实现功能 二、附加功能 三、开发环境 四、数据库简单字段设计 五、代码架构 六、软件界面 七、功能架构 八、部分功能截图 九、相关实现细节概要 9.1 获取文件信息 9.2 清理电脑垃圾信息 9.2.1 回收站 9.2.2 清理指定数据下的文件 9.3 数据库与网…...
BOE(京东方)旗下控股子公司“京东方能源”成功挂牌新三板 以科技赋能零碳未来
2025年4月8日,BOE(京东方)旗下控股子公司京东方能源科技股份有限公司(以下简称“京东方能源”)正式通过全国中小企业股份转让系统审核,成功在新三板挂牌(证券简称:能源科技,证券代码:874526),成为BOE(京东方)自物联网转型以来首个独立孵化并成功挂牌的子公司。此次挂牌是BOE(京…...
【汽车产品开发项目管理——端到端的汽车产品诞生流程】
MPU:集成运算器、寄存器和控制器的中央处理器芯片 MCU:微控制单元,将中央处理器CPU、存储器ROM/RAM、计数器、IO接口及多种外设模块集成在单一芯片上的微型计算机系统。 汽车产品开发项目属性:临时性、独特性、渐进明细性、以目标…...
Visual Studio 2019 配置VTK9.3.1
文章目录 参考博客1、 VTK下载和编译2、vs2019配置vtk9.3.1参考博客 Visual Studio 2022 配置VTK9.3.0 1、 VTK下载和编译 见博客 CMake编译VTK 2、vs2019配置vtk9.3.1 新建一个项目 写入以下代码 #include <vtkActor.h> #include <vtkAssembly.h> #include…...
【含文档+PPT+源码】基于小程序的智能停车管理系统设计与开发
项目视频介绍: 毕业作品基于小程序的智能停车管理系统设计与开发 课程简介: 本课程演示的是一款基于小程序的智能停车管理系统设计与开发,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含:…...
科技自立+产业周期:透视人工智能的配置机遇
最近,全球市场因关税政策调整引发震荡,科技板块波动尤为明显。在此背景下,中国人工智能产业经历了一轮回调。 不过,《一点财经》注意到,4月9日上证科创板人工智能指数一度上涨3.7%。拉长周期看,Wind数据显…...
linux网络配置
今天我们来了解一下linux的网络配置,这个是我们进行网络传输的基础,保证网络资源的使用的手段.那么来看. 网络配置原理图: 查看网络ip和网关 windows:ipconfig linux:ifconfig ping测试主机之间网络联通性 ⭐️ip地址要在同一个网段下才…...
机器学习 | 强化学习方法分类汇总 | 概念向
文章目录 📚Model-Free RL vs Model-Based RL🐇核心定义🐇核心区别 📚Policy-Based RL vs Value-Based RL🐇核心定义🐇 核心区别 📚Monte-Carlo update vs Temporal-Difference update…...
git仓库迁移包括提交记录日志
网上找了很多资料都不好用,直到看到一个亲测有效后,整理如下: 1、进入仓库目录下,并且切换到要迁移的分支上 前提是你本地已有旧仓库的代码;如果没有的话,先拉取。 2、更改仓库地址 git remote set-url …...
Docker部署.NetCore8项目
在VS.net新建.netCore8项目,生成项目的发布文件,之后添加Dockerfile,内容如下: FROM mcr.microsoft.com/dotnet/aspnet:8.0 # 设置工作目录 WORKDIR /app # 挂载临时卷(类似于 VOLUME /tmp) VOLUME /tmp …...
xv6部分源码阅读-1
xv6部分源码阅读 前言 在lab2中,我们会为了完成attack这个实验,而花费大量的时间去阅读相关的系统调用源码,以此来分析出我们最终secret所在的页表的位置,而我写lab2中,重点并没有关注其中的逻辑关系,有很…...
CentOS中离线安装DockerCompos并用其部署Rabbitmq(使用离线导入导出docker镜像方式)
场景 DockerDockerCompose实现部署jenkins,并实现jenkinsfile打包SpringBootVue流水线项目过程详解、踩坑记录(附镜像资源、离线包资源下载): DockerDockerCompose实现部署jenkins,并实现jenkinsfile打包SpringBootVue流水线项目过程详解、踩坑记录(附镜像资源、离…...
基于 OpenHarmony 5.0 的星闪轻量型设备应用开发——Ch2 OpenHarmony LiteOS-M 内核应用开发
写在前面: 此篇是系列文章《基于 OpenHarmony5.0 的星闪轻量型设备应用开发》的第 2 章。本篇介绍了如何在 OpenHarmony 5.0 框架下,针对 WS63 进行 LiteOS-M 内核应用工程的开发。 为了方便读者学习,需要OpenHarmony 5.0 WS63 SDK 的小伙伴可…...
2025年4月9日-华为暑期实习-第二题-200分
📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 02. 智能导航系统 问题描述 K小姐生活在一个被称为"未来之城"的智能城市,这个城市拥有高效的无人驾驶运输网络。城市内的智能车辆可以在不同的交通枢纽之间穿行,每个枢…...
抖音视频下载工具
抖音视频下载工具 功能介绍 这是一个基于Python开发的抖音视频下载工具,可以方便地下载抖音平台上的视频内容。 主要特点 支持无水印视频下载自动提取视频标题作为文件名显示下载进度条支持自动重试机制支持调试模式 使用要求 Python 3.10Chrome浏览器必要的P…...
基于大模型预测儿童急性淋巴细胞白血病诱导达完全缓解患者综合治疗方案研究报告
目录 一、引言 1.1 研究背景与意义 1.2 研究目的 1.3 国内外研究现状 二、儿童急性淋巴细胞白血病及大模型相关理论基础 2.1 儿童急性淋巴细胞白血病概述 2.2 大模型技术原理及特点 三、大模型在术前评估中的应用 3.1 患者基本信息与病情数据收集 3.2 大模型对病情严…...
项目合同从专家到小白
文章目录 按项目范围划分项目总承包合同项目单项承包合同项目分包合同 按项目付款方式划分总价合同固定总价合同总价加激励费用合同(FPIF)总价加经济价格调整合同订购单 \ 单边合同 成本补偿合同工料合同(混合型) 基础概念目标成本…...
【windows10】基于SSH反向隧道公网ip端口实现远程桌面
【windows10】基于SSH反向隧道公网ip端口实现远程桌面 1.背景2.SSH反向隧道3.远程连接电脑 1.背景 Windows 10远程桌面协议的简称是RDP(Remote Desktop Protocol)。 RDP是一种网络协议,允许用户远程访问和操作另一台计算机。 远程桌面功…...
学习海康VisionMaster之四边形查找
一:进一步学习了 今天学习下VisionMaster中的四边形查找,这个还是拟合直线的衍生应用,可以同时测量四条直线并且输出交点或者判定是否有交点 二:开始学习 1:什么是四边形查找? 按照传统的算法,…...
菊风RTC 2.0 开发者文档正式发布,解锁音视频新体验!
重磅发布! 开发者们,菊风实时音视频2.0文档已正式发布上线,为您提供更清晰、更高效的开发支持!让菊风实时音视频2.0为您的音视频应用加速~ 菊风实时音视频2.0聚焦性能升级、体验升级、录制服务升级,助力视频通话、语…...