查看“Widget:ScrollSection”的源代码

<script>
(function() {
    function initScrollSections(containerSelector = '.scroll-container') {
        const container = document.querySelector(containerSelector);
        if (!container) return;
        
        const sections = container.querySelectorAll('.scroll-section');
        if (!sections.length) return;

        let currentSection = 0;
        let isScrolling = false;

        // 防抖函数
        function debounce(func, wait) {
            let timeout;
            return function(event) {
                event.preventDefault();
                event.stopPropagation();
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    func.apply(this, arguments);
                }, wait);
            };
        }

        // 切换部分
        function switchSection(direction) {
            if (isScrolling || sections.length <= 1) return;
            
            isScrolling = true;
            const currentSec = sections[currentSection];
            
            // 计算下一个section
            if (direction > 0) {
                currentSection = (currentSection + 1) % sections.length;
            } else {
                currentSection = (currentSection - 1 + sections.length) % sections.length;
            }
            
            const nextSec = sections[currentSection];
            
            // 设置新section的初始状态
            nextSec.style.display = 'block';
            nextSec.style.transition = 'transform 0.6s ease-out';
            
            if (direction > 0) {
                // 向下滚动：新section从当前位置稍微往下的位置开始
                nextSec.style.transform = 'translateY(8vh)';
            } else {
                // 向上滚动：新section从当前位置稍微往上的位置开始
                nextSec.style.transform = 'translateY(-8vh)';
            }
            
            // 立即隐藏当前section
            currentSec.style.display = 'none';
            
            // 在下一帧将新section移动到目标位置
            requestAnimationFrame(() => {
                nextSec.style.transform = 'translateY(0)';
            });
            
            // 动画结束后清理
            setTimeout(() => {
                nextSec.style.transition = '';
                isScrolling = false;
            }, 600);
        }

        // 处理滚轮事件
        const handleWheel = debounce((event) => {
            const direction = event.deltaY > 0 ? 1 : -1;
            switchSection(direction);
        }, 50);

        // 将事件监听器绑定到 window 对象上
        window.addEventListener('wheel', handleWheel, { passive: false });

        // 初始化第一个section
        sections[0].style.display = 'block';
    }

    // 暴露初始化函数到全局
    window.initScrollSections = initScrollSections;
})(); 
  document.addEventListener('DOMContentLoaded', function() {
            initScrollSections('.scroll-container');
});
  
 </script>