原生JS实现鼠标下滑模块自定位

news/2024/9/13 18:53:20/ 标签: javascript, 前端, css

源码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Smooth Scroll to Next Section</title><style>/* 设置各个div的高度和背景色 */div {height: 100vh; /* 每个模块占满一屏 */}body {margin: 0;scroll-behavior: smooth; /* 平滑滚动 */overflow: hidden; /* 禁用默认滚动 */}</style>
</head>
<body><div id="richText_1824020539961098240" style="background-color: pink;"></div><div id="richText_1824319781267161088" style="background-color: blue;"></div><div id="richText_1824027082358112256" style="background-color: skyblue;"></div><div id="richText_1826456900752228352" style="background-color: pink;"></div><div id="richText_1824027352135745536" style="background-color: yellow;"></div><div id="richText_1824028190514200576" style="background-color: green;"></div><div id="richText_1824353856996622336" style="background-color: purple;"></div><script>// 指定的div元素ID列表const sectionIds = ['richText_1824020539961098240','richText_1824319781267161088','richText_1824027082358112256','richText_1826456900752228352','richText_1824027352135745536','richText_1824028190514200576','richText_1824353856996622336'];// 根据ID列表获取对应的div元素const sections = sectionIds.map(id => document.getElementById(id));let currentSectionIndex = 0;let isScrolling = false;window.addEventListener('wheel', (event) => {if (isScrolling) return; // 如果正在滚动,阻止新的滚动事件isScrolling = true;if (event.deltaY > 0) { // 向下滚动currentSectionIndex = Math.min(currentSectionIndex + 1, sections.length - 1);} else if (event.deltaY < 0) { // 向上滚动currentSectionIndex = Math.max(currentSectionIndex - 1, 0);}// 滚动到目标divsections[currentSectionIndex].scrollIntoView({ behavior: 'smooth' });// 设置滚动锁,防止多次滚动setTimeout(() => {isScrolling = false;}, 1000); // 1秒的延迟时间,可以根据实际情况调整});</script>
</body>
</html>


http://www.ppmy.cn/news/1515556.html

相关文章

区块链基础通识(1)——分布式系统的共识问题

分布式系统 我们最初了解区块链的时候&#xff0c;很多人会形容这个区块链是一个“分布式的不可篡改账本”&#xff0c;这是一个很形象的说法&#xff0c;但是我认为更为准确的形容是“所有节点共同维护的状态机”。为什么分布式和区块链不能划等号呢&#xff1f; 两种常见的…

2000-2023年上市公司财务困境RLPM模型数据(含原始数据+计算结果)

2000-2023年上市公司财务困境RLPM模型数据&#xff08;含原始数据计算结果&#xff09; 1、时间&#xff1a;2000-2023年 2、来源&#xff1a;上市公司年报 3、指标&#xff1a;证券代码、证券简称、统计截止日期、是否剔除ST或*ST或PT股、是否剔除上市不满一年、已经退市或…

Python酷库之旅-第三方库Pandas(097)

目录 一、用法精讲 416、pandas.DataFrame.memory_usage方法 416-1、语法 416-2、参数 416-3、功能 416-4、返回值 416-5、说明 416-6、用法 416-6-1、数据准备 416-6-2、代码示例 416-6-3、结果输出 417、pandas.DataFrame.empty属性 417-1、语法 417-2、参数 …

如何使用 vue2+element-ui 处理复杂表单,避免单文件过大的问题

引言 在工作中我经常需要处理一些复杂、动态表单&#xff0c;但是随着需求不断迭代&#xff0c;我们也许会发现曾经两三百行的.vue文件现在不知不觉到了两千行&#xff0c;三千行&#xff0c;甚至更多... 这对于一个需要长期维护的项目&#xff0c;无疑是增加了很多难度。 因此…

乐鑫ESP32-C2物联网芯片,助力家居设备智能升级,高效能连接方案

随着物联网技术的飞速发展&#xff0c;智能家居设备正逐渐成为现代生活的一部分。从智能灯泡到智能安防系统&#xff0c;这些设备通过无缝的网络连接&#xff0c;让家庭变得更加智能和便捷。 想象一下&#xff0c;当你下班回家&#xff0c;智能门锁识别你的身份自动解锁&#…

Spring 中FileSystemXmlApplicationContext

FileSystemXmlApplicationContext 是 Spring Framework 中的一个重要类&#xff0c;位于 org.springframework.context.support 包中。它是 ApplicationContext 接口的实现&#xff0c;专门用于从文件系统中的 XML 配置文件加载 Spring bean 定义。与 ClassPathXmlApplicationC…

如何把huggingface格式的whisper模型转为openai格式

1. 摘要 openai目前提供的模型有tiny&#xff0c;tiny.en&#xff0c;base&#xff0c;base.en&#xff0c;small&#xff0c;small.en&#xff0c;medium&#xff0c;medium.en&#xff0c;large-v1&#xff0c;large-v2&#xff0c;large-v3共11种&#xff0c;其中en结尾的是…

Resilience4J服务熔断隔离与限流

为了保障文章的流畅性&#xff08;文章穿插大量的环境搭建没意思&#xff0c;会干扰文章的主题&#xff0c;无聊的很&#xff09;&#xff0c;将环境的搭建与测试&#xff0c;工具的版本说明放了文末&#xff1a; 六、环境搭建。 一、Circuit Breaker是什么 1.1、官网 https…

@RequestBody与@RequestParam:Spring MVC中的参数接收差异解析

在Spring MVC中&#xff0c;RequestBody和RequestParam是两个常用于接收客户端请求参数的注解&#xff0c;但它们的使用场景和作用机制存在显著差异。了解这些差异对于开发RESTful API和处理HTTP请求至关重要。本文将详细探讨RequestBody与RequestParam的区别。 RequestParam …

matlab与VS混合编程以及错误解决

目录 前言&#xff1a; 1. matlab打包生成dll文件 打包方法一&#xff1a; 打包方法二&#xff1a; 2. VS端配置 3. 代码测试 4. 错误解决 a. 1.0x0000000000000000 处有未经处理的异常(在 Project1.exe 中): 0xC0000005: 执行位置 0x0000000000000000 时发生访问冲突。…

从法律风险的角度来看,项目经理遇到不清楚或不明确问题时的处理

大家好&#xff0c;我是不会魔法的兔子&#xff0c;在北京从事律师工作&#xff0c;日常分享项目管理风险预防方面的内容。 序言 在项目开展过程中&#xff0c;有时候会遇到一些不清楚或不明确的状况&#xff0c;但碍于项目进度的紧迫性&#xff0c;不得不硬着头皮做决策&…

数据结构(邓俊辉)学习笔记】串 02——模式匹配

1. 问题与需求 好&#xff0c;接下来我们就对这一章的主角&#xff0c;也就是串匹配问题&#xff0c;作一概述。 包括这个问题是什么&#xff1f;有哪些不同层次的功能要求&#xff1f;以及如何评测相应算法的性能&#xff0c;尽管我们还没有涉及到具体的算法。 如果你使用…

【WebSocket】websocket学习【二】

1.需求&#xff1a;通过websocket实现在线聊天室 2.流程分析 3.消息格式 客户端 --> 服务端 {"toName":"张三","message":"你好"}服务端 --> 客户端 系统消息格式&#xff1a;{"system":true,"fromName"…

Python——xml.etree.ElementTree

Python的xml.etree.ElementTree库详解 xml.etree.ElementTree&#xff08;简称ElementTree&#xff09;是Python标准库中用于处理XML文件的模块。它提供了简洁且高效的API&#xff0c;适用于解析、创建和修改XML文档。在需要处理XML数据的场景中&#xff0c;比如配置文件、数据…

npm install报错解决记录

npm install报错解决记录 在前端开发和Node.js项目中&#xff0c;npm install 是我们日常工作中频繁使用的命令之一&#xff0c;它用于安装项目所需的依赖包。然而&#xff0c;在实际操作中&#xff0c;我们经常会遇到各种各样的错误&#xff0c;这些错误可能源于网络问题、np…

【Apache Doris】周FAQ集锦:第 19 期

【Apache Doris】周FAQ集锦&#xff1a;第 19 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户…

Hadoop的概念

目录 1.什么是大数据 2.Hadoop体系结构 1&#xff1a;HDFS&#xff08;Hadoop Distributed File System&#xff09; 2 &#xff1a;MapReduce 3&#xff1a;YARN&#xff08;Yet Another Resource Negotiator&#xff09; 3、Hadoop生态圈 4、MapReduce的原理和工作流程…

Cloudflare+Nginx+Docker搭建可用Docker镜像源,解决Docker镜像源失效问题。(保姆级教程)

1. 前提准备条件&#xff08;中转机&#xff09; 准备一个域名。 一台能访问国际互联网服务器,充当中转站&#xff08;最好就是流量大的&#xff09;。 注册一个Coudflare账号&#xff0c;通过Coudflare解析域名&#xff08;DNS&#xff09;到服务器IP&#xff0c;开启CDN&am…

第四十六篇,PID心法解读

猛回头&#xff0c;有近半年的时光没输出了&#xff0c;看着昨天加班调的PID数据&#xff0c;灵光闪现了一下&#xff0c;赶紧记录。 参数整定找最佳&#xff0c;从小到大顺序查   先是比例后积分&#xff0c;最后再把微分加 曲线振荡很频繁&#xff0c;比例度盘要放大   曲…

OpenCV c++ 实现图像马赛克效果

VS2022配置OpenCV环境 关于OpenCV在VS2022上配置的教程可以参考&#xff1a;VS2022 配置OpenCV开发环境详细教程 图像马赛克 图像马赛克&#xff08;Image Mosaic&#xff09;的原理基于将图像的特定区域替换为像素块&#xff0c;这些像素块可以是纯色或者平均色&#xff0c…