前端HTML文件的＜script＞ 标签实现鼠标滚轮滑动时进行上下页切换

跟AI问了N个问题后总结实践得到以下代码：
滚动到某个元素的顶部：

window.scrollTo({
 	top: Div.offsetTop,
	behavior: 'smooth' // 平滑滚动效果（如果浏览器支持）
});

页面开始时判断自己处于哪一页：

function confirmCurrentIndex() {
	for (var i = 0; i <= section.length - 1; i++) {
		var Divsearch = document.querySelector(section[i]);
		if (isElementInViewport(Divsearch)) {
		currentDiv = section[i];
		break;
		} else {
		currentDiv = section[0];
		}
	}
}

判断元素是否在当前视口：

function isElementInViewport(el) {
	const rect = el.getBoundingClientRect();
	return (
		rect.top >= 0 &&
		rect.left >= 0 &&
		rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
		rect.right <= (window.innerWidth || document.documentElement.clientWidth)
	);
}

存在页脚时需要判断是否到最后一个

if (currentIndex != section.length - 1 || scrollDirection != 'down') {
                            event.preventDefault();
                        }

<script>
        const section = ['.blank_one', '.blank_two', '.blank_three', '.blank_four', '.blank_five', '.blank_six', '.blank_seven', '.blank_eight', '.blank_night'];	//一开始需要已经知道自己有哪些class名
        var currentDiv;
        var currentIndex = 0;
        var isScroll = true;
        var touchBottom = false;

        document.addEventListener("DOMContentLoaded", function () {
            console.log('fullpage的load');
            var element = document.getElementById('fullpage');
            if (element) {	//确保你的 JavaScript 代码在 DOM 元素加载完成后执行。你可以将你的 JavaScript 代码放在 window.onload 事件处理器中，或者将你的 <script> 标签放在 HTML 文档的底部，紧接在关闭的 </body> 标签之前
                // 元素存在，可以安全地调用 getBoundingClientRect
                var rect = element.getBoundingClientRect();
                confirmCurrentIndex();

                // 假设你想在某个事件上调用这个函数
                // 确保元素加载完成后绑定事件
                document.getElementById('fullpage').addEventListener('wheel', function (event) {
                    // 假设当前滚动位置所在的div可以通过某种方式获得，这里只是示例
                    console.log('滚轮事件发生');
                    // event.preventDefault();

                    if (isScroll) {
                        isScroll = false
                        // 获取滚轮滚动的方向
                        var delta = event.deltaY;
                        console.log('滚轮滚动数值:', delta);
                        var scrollDirection = (delta <= -1) ? 'up' : 'down'; // 根据deltaY的正负判断滚动方向

                        // 在这里执行你的代码，比如滚动到下一个div
                        // 注意：通常不会直接在这里改变滚动位置，因为这可能会导致不自然的滚动体验
                        console.log('滚轮滚动方向:', scrollDirection);

                        if (currentIndex != section.length - 1 || scrollDirection != 'down') {
                            event.preventDefault();
                        }

                        var Divcurrent = document.querySelector(currentDiv);
                        if (isElementInViewport(Divcurrent)) {
                            // 元素在视口内
                            currentIndex = section.indexOf(currentDiv);
                            console.log('元素在视口内', Divcurrent, currentIndex);
                        } else {
                            // 元素不在视口内
                            console.log('元素不在视口内', Divcurrent);
                        }
                        console.log('是否触底', touchBottom);
                        if (scrollDirection == 'up') {
                            if (currentIndex > 0 && !touchBottom) {
                                --currentIndex;
                            }
                            touchBottom = false;
                        } else {
                            if (currentIndex == section.length - 1) { touchBottom = true }
                            if (currentIndex < section.length - 1) { ++currentIndex; }
                        }
                        console.log('判断过后触底情况', touchBottom);
                        // 获取下一个div
                        var nextDiv = document.querySelector(section[currentIndex]);
                        currentDiv = section[currentIndex];
                        console.log('next元素', nextDiv);
                        if (nextDiv && !touchBottom) {
                            // 如果存在下一个div，则滚动到它的顶部位置
                            window.scrollTo({
                                top: nextDiv.offsetTop,
                                behavior: 'smooth' // 平滑滚动效果（如果浏览器支持）
                            });
                        }
                    }

                    setTimeout(() => {
                        isScroll = true
                    }, 1000);
                }, { passive: false });
            } else {
                // 元素不存在，处理错误或等待元素加载
                alert('未能正确显示,请刷新页面重试')
                console.error('元素未找到');
            }
        })

        function confirmCurrentIndex() {
            for (var i = 0; i <= section.length - 1; i++) {
                var Divsearch = document.querySelector(section[i]);
                console.log('开始阶段元素在视口内Divsearch', Divsearch);
                if (isElementInViewport(Divsearch)) {
                    currentDiv = section[i];
                    break;
                } else {
                    currentDiv = section[0];
                }
            }
        }

        function isElementInViewport(el) {
            const rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }

    </script>