DIV设置overflow后滚动条无法始终显示的问题排查

你的问题出在CSS属性的覆盖逻辑上：你写的overflow:scroll;overflow-y:visible中，后声明的overflow-y:visible直接覆盖了overflow:scroll里的垂直滚动条设置。

CSS中，同一元素的同类型属性，后写的会覆盖先写的。overflow是简写属性，同时控制水平（x）和垂直（y）方向的溢出行为；而单独的overflow-y会专门修改垂直方向的规则，把你原本想要的“始终显示垂直滚动条”改成了“内容溢出时不裁剪、不显示滚动条”，这就导致只有滚动时浏览器才会临时显示滚动条（部分浏览器的默认行为）。

修复方法 #

直接移除overflow-y:visible，根据需求二选一：

1. 仅垂直方向始终显示滚动条（水平方向按需处理）：

<div style='height:200px; overflow-y:scroll;'>
  <!-- 你的大段文本内容 -->
</div>

2. 水平和垂直方向都始终显示滚动条：

<div style='height:200px; overflow:scroll;'>
  <!-- 你的大段文本内容 -->
</div>

这样设置后，滚动条会一直显示，用户能直观看到还有未展示的内容。

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