带前进/后退按钮的横向滚动页面导航技术求助

原代码存在多个关键问题，导致仅能切换到第二个section，以下是修复后的完整实现：

修复后的代码 #

HTML部分（新增左箭头按钮） #

<button id="scrollPrev" class="scroll-button">◀</button>
<button id="scrollNext" class="scroll-button">▶</button>

JavaScript部分 #

const scrollPrevButton = document.getElementById('scrollPrev');
const scrollNextButton = document.getElementById('scrollNext');
const sections = document.querySelectorAll('section');

// 初始化激活状态：若没有已激活的section，默认选中第一个
if (!document.querySelector('section[data-active]')) {
    sections[0].setAttribute('data-active', true);
}

// 通用切换section函数，支持向前/向后切换
function switchSection(direction) {
    const currentSection = document.querySelector('section[data-active]');
    if (!currentSection) return;

    const currentIndex = [...sections].indexOf(currentSection);
    let targetIndex;

    // 处理前后切换逻辑，可选循环滚动（不需要循环可修改条件）
    if (direction === 'next') {
        targetIndex = currentIndex + 1 < sections.length ? currentIndex + 1 : 0;
    } else {
        targetIndex = currentIndex - 1 >= 0 ? currentIndex - 1 : sections.length - 1;
    }

    const targetSection = sections[targetIndex];
    // 横向滚动需使用inline参数控制水平对齐，原代码block参数对应纵向滚动
    targetSection.scrollIntoView({
        behavior: 'smooth',
        inline: 'start'
    });

    // 同步更新激活标记，确保下次点击基于最新状态
    currentSection.removeAttribute('data-active');
    targetSection.setAttribute('data-active', true);
}

// 绑定按钮点击事件
scrollNextButton.addEventListener('click', () => switchSection('next'));
scrollPrevButton.addEventListener('click', () => switchSection('prev'));

// 滚动时自动更新激活section
window.addEventListener('scroll', () => {
    // 横向滚动场景，取视口中心位置检测当前可见section
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;
    let targetElement = document.elementFromPoint(centerX, centerY);

    // 向上查找父级section，避免点击到section内的子元素导致错误
    while (targetElement && targetElement.tagName !== 'SECTION') {
        targetElement = targetElement.parentElement;
    }

    if (!targetElement || targetElement.hasAttribute('data-active')) return;

    // 更新所有section的激活状态
    sections.forEach(sec => sec.removeAttribute('data-active'));
    targetElement.setAttribute('data-active', true);
});

关键修复点说明 #

1. 横向滚动参数修正：将scrollIntoView的block: "start"改为inline: "start"，适配横向滚动的对齐需求，原参数仅对纵向滚动生效
2. 激活状态同步更新：点击切换section后立即更新data-active属性，解决原代码点击后激活标记未同步，导致后续点击仍基于旧状态的问题
3. 全局DOM查询优化：统一全局定义sections变量，避免重复查询DOM，同时解决原滚动事件中sections变量未定义的报错
4. 滚动检测容错处理：通过视口中心位置检测当前可见section，并处理子元素的情况，避免elementFromPoint返回非section元素导致的错误
5. 移除无效操作：删除原代码中给button设置href的无效逻辑（button标签无此属性）
6. 新增左箭头逻辑：封装通用切换函数，支持前后切换，可选循环滚动（不需要循环可修改targetIndex的判断条件）

内容的提问来源于stack exchange，提问作者dickySOL