如何实现垂直滚动条处于顶部时水平滚动条始终可见

问题描述 #

您可以看到，当垂直滚动条位于顶部时，水平滚动条处于不可见状态。我需要让水平滚动条始终显示，从而能够向左右两侧滚动。

当前代码使用了<tr>和<td>标签，相关代码如下：

<tr>
    <th class="report-table-header">Error Description
        <button style="height: 15px; width: 15px; background: url(img/copy.png); background-position: center; background-size: 15px; border: none; outline: none; margin: 2px;"
            title="Copy to Clipboard" ng-click="copytoclipboard(summaryonlyerror)">
        </button>
    </th>
    <td colspan="4">
        <div style="width: 100%; height: 100%; margin: 0; padding: 0;overflow: auto;">
            <pre midwayclickable="summaryonlyerror" midwayclickabledata="lbadetails" midwayclickablecanshow="(testinfo.adapter == 'Card') ? true : false"></pre>
            <!--ng-bind-html="summaryonlyerror | clickable: (testinfo.adapter == 'Card' ? true : false):lbadetails"-->
        </div>
    </td>
</tr>

效果截图如下：

解决方案 #

问题根源是包裹pre元素的div设置了overflow: auto，水平滚动条默认渲染在容器的最底部，只有当垂直滚动条拉到容器底部时才会进入可视区域，可按以下方案修改：

方案1：强制水平滚动条始终显示 #

将div的overflow属性拆分，单独指定水平方向强制显示滚动条：
把原div的样式属性从
style="width: 100%; height: 100%; margin: 0; padding: 0;overflow: auto;"
修改为：
style="width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: scroll; overflow-y: auto;"

修改后的完整代码片段如下：

<tr>
    <th class="report-table-header">Error Description
        <button style="height: 15px; width: 15px; background: url(img/copy.png); background-position: center; background-size: 15px; border: none; outline: none; margin: 2px;"
            title="Copy to Clipboard" ng-click="copytoclipboard(summaryonlyerror)">
        </button>
    </th>
    <td colspan="4">
        <div style="width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: scroll; overflow-y: auto;">
            <pre midwayclickable="summaryonlyerror" midwayclickabledata="lbadetails" midwayclickablecanshow="(testinfo.adapter == 'Card') ? true : false"></pre>
            <!--ng-bind-html="summaryonlyerror | clickable: (testinfo.adapter == 'Card' ? true : false):lbadetails"-->
        </div>
    </td>
</tr>

方案2：兼容浏览器默认隐藏滚动条的情况 #

如果修改后滚动条还是仅在滚动时显示，是部分浏览器的默认行为，可额外添加以下CSS强制显示滚动条：

/* 适配Chrome、Edge、Safari等webkit内核浏览器 */
div::-webkit-scrollbar {
  -webkit-appearance: none;
}
div::-webkit-scrollbar:horizontal {
  height: 12px;
}
div::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 2px solid #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}

方案3：固定水平滚动条到可视区域底部（可选） #

如果不需要滚动到容器底部就能操作水平滚动条，可以给div添加position: sticky; bottom: 0;样式，同时调整父容器的定位规则即可实现。

内容的提问来源于stack exchange，提问作者AMARJIT KUMAR SINGH