当前位置: 首页 > news >正文

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

源码:

<!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.mrgr.cn/news/10936.html

相关文章:

  • wooyu漏洞库YYDS!!!入门之道:重现乌云漏洞库
  • 汇编基础指令
  • redis集群部署
  • MindSearch 部署
  • 《黑神话:悟空》游戏中的江苏元素
  • golang-gin使用中间件处理文本-时间字符串格式
  • 深入理解Pandas:数据处理的核心技能与应用(四)
  • 【红队技巧】.Net免杀 绕过主流杀软
  • SpringBoot文档之Logging的阅读笔记
  • Swift中的可选类型:揭开Optional的神秘面纱
  • 如何使用ssm实现品牌手机销售信息系统
  • 利用机器学习推动 vSOC 检测
  • 【ShuQiHere】从零开始实现逻辑回归:深入理解反向传播与梯度下降
  • Vue55 动画与过度
  • 【openwrt-21.02】openwrt-21.02 T750 按键GPIO自动进入刷机模式功能实现
  • 热点 | 爆款游戏的诞生与游戏出海的持续增长
  • Redis应用
  • 等保测评与企业风险管理:构建坚实的信息安全防线
  • threejs 创建CSS3DSprite精灵标签, 可以更新位置及内容(封装)
  • 编程之路:在Bug的迷宫中寻找出口