源码:
<!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>