浏览器环境下如何隐藏元素垂直滚动条保留滚动功能且显示水平滚动条

修改后完整代码 #

.container {
    overflow-y: scroll;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar; /* IE10+ 适配 */
}

/* WebKit 内核浏览器（Chrome、Edge、Safari等）适配 */
.container::-webkit-scrollbar {
    height: 8px; /* 自定义水平滚动条高度，可按需调整 */
}
.container::-webkit-scrollbar:vertical {
    width: 0; /* 垂直滚动条宽度设为0，实现隐藏 */
}

/* Firefox 适配 */
@supports (scrollbar-width: none) {
    .container {
        margin-right: -17px; /* 偏移量等于默认滚动条宽度，可按需调整 */
        padding-right: 17px; /* 抵消偏移，保证内容布局不变 */
    }
    /* 外层如果有父容器，可给父容器加 overflow: hidden 裁切掉移出可视区域的垂直滚动条 */
}

核心修改说明 #

• 原代码中scrollbar-width: none会隐藏火狐浏览器下所有方向的滚动条，因此替换为兼容性更好的偏移隐藏方案，保留水平滚动条显示。
• 原代码中-ms-overflow-style: none会隐藏IE浏览器下所有方向的滚动条，替换为-ms-autohiding-scrollbar即可仅隐藏垂直滚动条。
• 原WebKit适配代码同时设置了width: 0和height: 0，导致两个方向滚动条都被隐藏，现在单独指定垂直滚动条宽度为0，保留水平滚动条的高度配置即可正常显示。

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