响应式移动端侧边栏导航链接无法点击、平滑滚动失效问题求助

问题修复方案 #

1. 调整JS执行时机，补充侧边栏关闭逻辑 #

你的JS代码如果是在DOM未完成渲染时执行，可能无法正确绑定移动端菜单内的锚点点击事件，且点击锚点后未关闭侧边栏会让你误以为滚动没生效。替换原有全部JS代码为以下内容：

document.addEventListener('DOMContentLoaded', () => {
    const mainMenu = document.querySelector('.main-menu');
    // 菜单切换逻辑
    document.querySelector('.menu-btn').addEventListener('click', () => {
        mainMenu.classList.toggle('show');
    })
    // 平滑滚动逻辑
    document.querySelectorAll('.main-menu a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (!target) return;
            // 点击锚点后自动关闭侧边栏
            mainMenu.classList.remove('show');
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        });
    });
})

2. 修正滚动容器CSS配置 #

你在移动端媒体查询中给.container设置了overflow-x: hidden，会导致部分浏览器将滚动容器从默认的根节点变为.container，造成滚动逻辑失效。做如下修改：

/* 全局添加滚动属性兜底 */
html, body {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
@media(max-width:700px){
   .container{
    /* 删除原有的overflow-x: hidden; */
   }
   /* 其余原有CSS保留不变 */
}

3. 老旧移动端浏览器兼容（可选） #

如果使用上述方案后部分老旧设备仍无效果，可将scrollIntoView逻辑替换为window.scrollTo实现兜底：

// 把原来的target.scrollIntoView部分替换为以下代码
window.scrollTo({
    top: target.offsetTop,
    behavior: 'smooth'
})

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