移动端X轴滚动问题：如何阻止侧滑导航栏触发横向滚动

问题背景 #

在屏幕宽度小于768px时，通过汉堡按钮控制侧滑导航栏（从right:-300px平移至right:0），桌面端窗口缩窄到768px以下时导航栏隐藏正常且无横向滚动，但移动端出现横向滚动，能看到处于隐藏位置的导航栏。已尝试为body设置overflow-x: hidden !important并监听resize事件，问题仍未解决。

导航栏现有CSS代码：

.navigation {
    position: absolute;
    top: 80px;
    right: -300px;
    width: 200px;
    display: flex;
    padding-top: 40px;
    background-color: #071e244b;
    flex-direction: column;
    align-items: left;
    transition: right 0.3s ease-in-out;
    height: 100vh;
    overflow-x: hidden;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.navigation.open {
    right: 0;
}

解决方案 #

• 给<html>标签也添加overflow-x: hidden，移动端浏览器中仅设置body的溢出隐藏可能不生效，需同时限制根元素的横向溢出：

html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

• 确保导航栏的直接父容器（如包裹导航的header或主容器）设置position: relative和overflow-x: hidden，绝对定位元素会相对于最近的定位父容器布局，父容器的溢出隐藏能限制导航栏的可视范围：

.header-container { /* 替换为你实际的父容器类名 */
    position: relative;
    overflow-x: hidden;
}

• 检查移动端视口meta标签是否正确配置，这是移动端页面适配的基础，错误的视口设置会导致布局偏移和滚动：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 优化导航栏的right值：当前导航栏宽度为200px，设置right: -200px即可完全隐藏，比-300px更合理，避免不必要的超出范围：

.navigation {
    right: -200px; /* 替换原有的-300px */
}

内容的提问来源于stack exchange，提问作者Joseph M V