如何实现一轴可滚动另一轴仅可见？侧边导航栏布局问题

问题分析 #

需要打造一个侧边导航容器，核心需求为：

• 仅Y轴方向支持滚动
• X轴方向子元素可溢出容器，但不会触发滚动
• 原代码中，子元素.nav-block的margin:12%导致容器X轴出现滚动条；若移除overflow相关设置，会触发整个页面滚动，均不符合需求。

解决方案 #

通过调整容器布局逻辑和子元素间距的实现方式，解决X轴滚动问题，同时保留Y轴滚动功能：

修改后的CSS代码

body {
  background-color: #212529;
  margin: 0; /* 移除默认body边距，避免页面整体滚动 */
}

#side-navbar {
  position: fixed; /* 固定定位确保导航栏始终在视口内 */
  background-color: #2b3035;
  height: 100vh; /* 占满视口高度 */
  width: 5%;
  overflow-y: auto; /* Y轴自动显示滚动条 */
  overflow-x: visible; /* X轴溢出内容可见 */
  scrollbar-width: none; /* 隐藏Firefox滚动条 */
  padding: 12% 0; /* 用容器内边距替代子元素上下外边距，避免X轴溢出 */
}

/* 隐藏Chrome/Edge滚动条 */
#side-navbar::-webkit-scrollbar {
  display: none;
}

.nav-block {
  height: 10%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  margin: 12% auto; /* 仅保留上下外边距，左右自动居中 */
  transition: all ease 0.2s;
}

.nav-block:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

修改后的HTML代码

<div id="side-navbar">
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
  <div class="nav-block"></div>
</div>

关键修改说明 #

1. 容器定位优化：改用position: fixed和height:100vh，确保导航栏始终占满视口高度，避免触发页面整体滚动。
2. 间距逻辑调整：用容器的内边距替代子元素的上下外边距，子元素仅保留上下外边距并左右居中，从根源避免X轴方向超出容器导致滚动。
3. 滚动条跨浏览器处理：通过scrollbar-width: none和::-webkit-scrollbar实现主流浏览器的滚动条隐藏，同时保留Y轴滚动功能。
4. overflow规则保留：维持overflow-y: auto和overflow-x: visible，确保Y轴可滚动、X轴溢出内容正常显示。

内容的提问来源于stack exchange，提问作者Berk Efe Keskin