为何仅水平滚动条隐藏而垂直滚动条不隐藏？CSS滚动条异常求助

首先，咱们先理清你之前代码里的几个核心问题，然后直接给你可行的解决方案：

问题根源拆解 #

1. 对overflow属性的误解：你一开始用overflow: visible，但这个值的作用是让内容溢出容器显示，不会生成滚动条——这也是你看不到垂直滚动条的核心原因。
2. 重复的样式声明：overflow是简写属性，已经同时控制x和y方向，重复写overflow-x/overflow-y不仅没必要，还可能导致浏览器解析时的优先级混乱。
3. overflow: scroll的特性：这个值会强制显示x和y方向的滚动条，不管内容是否溢出，所以你初始状态就看到滚动条，不符合“默认隐藏”的需求。

正确的解决方案 #

核心思路 #

给目标容器设置固定宽高，默认状态用overflow: hidden（隐藏滚动条+裁剪溢出内容），hover时切换为overflow: auto（仅当内容溢出时显示对应方向的滚动条，更贴合需求）。

完整代码示例 #

HTML（给容器加类名方便精准定位）

<div class="scroll-box">
  <nav>
    <ul>
      <li><a href="#">blah blah blah</a></li>
      <li><a href="#">blah blah blah</a></li>
      <li><a href="#">blah blah blah</a></li>
      <!-- 更多列表项 -->
    </ul>
  </nav>
</div>

CSS

.scroll-box {
  width: 300px;
  height: 200px;
  overflow: hidden; /* 默认隐藏滚动条，裁剪溢出内容 */
  border: 1px solid #eee; /* 可选，方便看到容器边界 */
}

.scroll-box:hover {
  overflow: auto; /* hover时，自动检测溢出方向并显示滚动条 */
}

/* 重置列表默认样式，避免额外空间导致的溢出异常 */
.scroll-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scroll-box li {
  padding: 8px 10px;
}

.scroll-box a {
  text-decoration: none;
  color: #333;
}

可选调整 #

如果你需要强制hover时同时显示水平和垂直滚动条（不管内容是否溢出），可以把hover时的样式改成：

.scroll-box:hover {
  overflow: scroll;
}

关于之前的“文本消失”问题 #

你之前用overflow: scroll后hover文本消失，大概率是因为滚动条占用了容器内部的空间，加上列表默认的margin/padding，导致内容被挤压超出可视范围。重置列表的默认样式后，这个问题就会解决。

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