移动 webkit 滚动条答案

【问题标题】：Mobile webkit scroll bars移动 webkit 滚动条
【发布时间】：2012-08-06 08:54:26
【问题描述】：

我目前正在尝试在表格周围的 div 上设置溢出样式，我正在使用 webkit 特定样式来执行此操作

.overflow::-webkit-scrollbar {
        width:30px;
        }
    .overflow::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        -webkit-border-radius: 15px;
        border-radius: 15px;
    }
    .overflow::-webkit-scrollbar-thumb {
        -webkit-border-radius: 15px;
        border-radius: 15px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
        background:#f00;
    }

这些在桌面浏览器上运行良好，但在移动浏览器上不起作用。

移动浏览器根本不支持这样做的问题吗？还是会在不久的将来推出支持？

我见过一些基于 Javascript 的解决方案，但这些都增加了一点点臃肿，无法在基于 webkit 的浏览器中简单地设置滚动条的样式。

【问题讨论】：

标签： html css mobile webkit

【解决方案1】：

您无法在移动设备上设置原生滚动条的样式，而且我怀疑您是否能够做到，抱歉。

我不能说为什么有任何权威，但所有手机和操作系统都使用不同的浏览器，并且每个都有自己的滚动条实现。很多人也采用了 iOS 的渐隐式滚动条方法，这意味着无论如何都没有太多的设计意义。

这确实限制了您真正使用自定义解决方案。

【讨论】：

至于移动版chrome从v88（当前）开始，海关滚动条are supported借助相同的css规则。

【解决方案2】：

我认为您应该使用自定义滚动条。对于自定义滚动条，您使用 jquery 滚动条“jscrollPane”。您必须下载这些文件： ScrollPanel.js、jquery.mousewheel.js、jquery.jscrollpane.min.js、jquery.jscrollpane.js、jquery.jscrollpane.css

更多详情请点击此链接： http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

【讨论】：

【解决方案3】：

手机safari不支持div滚动，可以使用iscoll框架

【讨论】：

是的。 overflow: scroll;