如何实现元素滚动？div元素滚动条显示异常问题咨询

咱们先拆解下你遇到的两个问题，其实核心原因都是容器没有明确的高度限制，导致滚动条没有触发的条件：

问题1：只有滚动箭头，看不到滑块 #

你给#roomlist设置了overflow: scroll，但注释掉了max-height: 100%，这会让容器高度完全由内部内容撑开——内容多高，容器就多高，根本没有滚动的必要，所以浏览器只会显示箭头占位，不会出现可拖动的滑块。

问题2：修改DOM结构后完全看不到滚动条 #

你给#ex1加了overflow: auto和flex相关属性，但父容器#roomlist还是没有高度限制，#ex1的min-height: 0也就起不到作用，容器依然被内容撑满，自然不会出现滚动条。

具体解决方案 #

我给你调整了CSS和结构，确保滚动条能正常显示：

1. 固定容器的高度限制 #

给#roomlist设置明确的max-height，比如用视口高度减去顶部的margin-top:70px，保证容器不会超出屏幕：

#roomlist {
  width: 250px;
  max-height: calc(100vh - 70px); /* 关键：限制容器最大高度 */
  overflow: hidden; /* 先隐藏外层滚动，让内层负责滚动 */
  max-width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -210px;
  background-color: #91c7e1;
  transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
  z-index: 1;
  margin-top: 70px;
  display: flex; /* 开启flex让子元素能填充容器 */
  flex-direction: column;
}

#ex1 {
  flex: 1 1 auto; /* 让这个容器填充剩余空间 */
  min-height: 0; /* 解决flex子元素高度溢出的问题 */
  overflow-y: auto; /* 只在垂直方向显示滚动条 */
}

2. 保持DOM结构（你修改后的版本即可） #

<div id="roomlist">
  <div id='ex1'>
    <ul id="roomlistul">
      <!-- 这里放你的列表内容，比如足够多的li来测试滚动 -->
      <li>房间1</li>
      <li>房间2</li>
      <li>房间3</li>
      <li>房间4</li>
      <li>房间5</li>
      <li>房间6</li>
      <li>房间7</li>
      <li>房间8</li>
      <li>房间9</li>
      <li>房间10</li>
      <li>房间11</li>
      <li>房间12</li>
    </ul>
  </div>
</div>

为什么这么做？ #

• 滚动条的核心逻辑是：当容器内容高度超过容器自身高度时，才会触发滚动，所以必须给容器设置明确的height或max-height。
• 用flex布局让#ex1填充#roomlist的剩余空间，配合min-height:0可以避免flex子元素忽略父容器高度限制的问题。
• 把外层#roomlist的overflow设为hidden，让内层#ex1负责滚动，这样滚动条只会出现在内容区域，不会影响外层的样式。

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