欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 维修 > 原生JS实现鼠标下滑模块自定位

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

2025/2/7 19:59:08 来源:https://blog.csdn.net/p_s_p/article/details/141502559  浏览:    关键词:原生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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com