移动端自定义水平滚动条不显示？Elementor自定义CSS问题求助

你的自定义水平滚动条在移动端失效，核心原因集中在这几点：

• 你设置的scrollbar-width: none和-ms-overflow-style: none，会直接让Firefox/IE/Edge等非WebKit浏览器隐藏滚动条，移动端部分浏览器会继承这个规则
• box-sizing: auto不是标准CSS属性，会导致容器布局计算异常，间接干扰滚动行为
• iOS Safari对自定义滚动条支持有特殊性，默认仅在滚动时显示滚动条，且自定义样式需要额外适配
• Elementor的默认移动端样式，可能通过媒体查询覆盖了你设置的overflow-x等属性

具体修复步骤： #

1. 移除无效的滚动条隐藏规则：删掉scroller-cards里的scrollbar-width: none和-ms-overflow-style: none，这两个规则会阻止非WebKit浏览器显示滚动条，移动端没必要强制隐藏。
2. 修复盒模型属性：把*, *:before, *:after里的box-sizing: auto改成box-sizing: border-box，这是标准盒模型设置，确保容器尺寸计算准确。
3. 提高CSS优先级：给滚动容器选择器加上Elementor常用的父类前缀（比如.elementor-widget-container .scroller-cards），避免被Elementor默认样式覆盖。
4. 增强移动端兼容性：添加针对移动端的媒体查询，优化滚动条样式适配iOS Safari和Firefox移动端。

修改后的完整代码： #

/* 修复标准盒模型 */
*, *:before, *:after {
    box-sizing: border-box;
}

.scroller-card {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    flex-basis: 300px;
    border-radius: var(--whiskey-radius);
    margin: 8px;
    padding: 16px;
    color: var(--whiskey-color);
    background-color: var(--whiskey-panel-background);
    transition: all 150ms ease-out;
}

/* 提高优先级，避免被Elementor默认样式覆盖 */
.elementor-widget-container .scroller-cards {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch; /* 保持iOS顺滑滚动体验 */
    transform-style: preserve-3d;
    perspective: 800px;
    padding: 24px 0;
}

/* WebKit滚动条自定义样式（适配桌面+移动端WebKit浏览器） */
.scroller-cards::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 5px;
    height: 5px;
}

.scroller-cards::-webkit-scrollbar-thumb {
    border-radius: 16px;
    background-color: rgba(15, 43, 74, 0.5); /* 合并opacity到颜色值，提升兼容性 */
}

/* 移动端专属适配 */
@media screen and (max-width: 767px) {
    .scroller-cards::-webkit-scrollbar {
        height: 6px; /* 移动端适当加大滚动条高度，方便触摸操作 */
    }
    .scroller-cards {
        scrollbar-color: rgba(15, 43, 74, 0.5) transparent; /* 适配Firefox移动端 */
    }
}

额外提示： #

• 打开Elementor响应式编辑器，确认移动端视图下scroller-cards的overflow属性没有被改成hidden
• iOS Safari的滚动条默认仅在滚动时显示，这是系统原生行为，若要强制一直显示，可添加::-webkit-scrollbar-track样式并设置背景色，但可能影响原生体验

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