Chrome浏览器中表格横向滚动条仅特定场景可见的修复问询

问题说明 #

我有一个横向超出屏幕的表格，设置overflow: auto或overflow: scroll后，滚动功能正常——按箭头键或拖拽选中文本滑动时表格会滚动，滚动条也会显示，但无操作时滚动条会自动消失。刷新页面时滚动条会短暂正常显示，操作时也在正确位置出现，说明滚动条位置没问题。该问题仅出现在Chrome浏览器，Edge和CodePen中运行正常，求Chrome下的修复方案。

现有代码 #

HTML代码 #

<div class="analytics-table-class">
<table class="analytics-content-table">
   <thead>
      <tr>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
         <th>alkdjslskdfjakdjsfkflkdja</th>
      </tr>
   </thead>
</table>
<div>

CSS代码 #

.analytics-content-table {
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 15px;
    min-width: 80%;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
 }
 .analytics-table-class{
        width:100vw; 
        overflow: scroll;
    }

 .analytics-content-table thead tr {
    background-color: green;
    color: white;
    text-align: left;
    font-weight: bold;
 }
 .analytics-content-table th,
 .analytics-content-table td {
    padding: 12px 15px;
    font-size: 15px;
    font-family: sans-serif;
 }

修复方案 #

方案1：强制自定义Chrome滚动条样式 #

Chrome默认在元素未交互时会隐藏滚动条（尤其是macOS环境），通过自定义滚动条伪元素可以强制让它始终显示：

/* 针对横向滚动条设置样式 */
.analytics-table-class::-webkit-scrollbar {
  height: 8px; /* 设置横向滚动条高度 */
}
.analytics-table-class::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道背景 */
}
.analytics-table-class::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条滑块颜色 */
  border-radius: 4px; /* 滑块圆角 */
}
.analytics-table-class::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 鼠标悬停时滑块颜色 */
}

添加这段CSS后，滚动条会始终保持可见状态，不会在无操作时消失。

方案2：调整容器宽度属性 #

当前容器使用width:100vw可能会和浏览器视口的滚动区域产生冲突，换成width:100%并启用盒模型优化：

.analytics-table-class{
  width: 100%; 
  overflow: scroll;
  box-sizing: border-box;
  padding: 0; /* 避免内边距导致宽度溢出 */
}

100%宽度会贴合父容器的可用空间，减少布局异常导致的滚动条隐藏问题。

方案3：确保表格确实超出容器范围 #

如果表格宽度没有真正超出容器，Chrome可能自动隐藏滚动条。可以给表格设置明确的宽度，确保横向溢出：

.analytics-content-table {
    /* 保留原有样式 */
    width: 120%; /* 或者固定值如1200px，根据实际需求调整 */
}

强制让表格宽度超过容器宽度，触发滚动条持续显示。

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