垂直滚动条无法正常显示，多种CSS方案尝试无效，求解决方法

以下几个容易忽略的设置可以逐一排查：

1. 确认html/body的高度配置
   如果html或body未明确设置高度，浏览器会根据内容自适应高度，此时即便设置overflow-y: scroll，当内容未超出视口时，滚动条可能和auto表现一致。可以尝试给html和body都设置100%高度：

html, body {
  height: 100%;
  margin: 0; /* 移除默认边距避免滚动条异常 */
  overflow-y: scroll;
}

2. 检查CSS规则的覆盖情况
   查看是否存在优先级更高的选择器（如带类名、ID的选择器）或!important规则，意外覆盖了html的overflow-y属性。可以通过浏览器开发者工具（F12）查看html元素的计算样式，确认overflow-y是否确实被设为scroll。

3. Firefox中废弃属性的影响
   -moz-scrollbars-vertical是已废弃的属性，现代Firefox无需使用，直接保留overflow-y: scroll即可，建议移除废弃属性避免干扰正常样式。

4. 优化webkit滚动条的可见性
   在Chrome/Safari等webkit内核浏览器测试时，若自定义滚动条样式后仍不明显，可添加轨道样式区分背景：

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置轨道背景色，提升可见度 */
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

5. 排查外层容器的overflow设置
   检查页面是否存在外层容器设置了overflow: hidden，导致全局滚动条被遮挡或无法生效，比如某些全屏布局容器可能会干扰滚动条显示。

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