Question

我目前正试图在桌子周围的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的浏览器中设置滚动条的样式添加了一点点臃肿。

Answer 1

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

我不能说任何权威的原因，但所有的手机和操作系统都使用不同的浏览器，每个人都有自己的滚动条实现。很多人已经采用了iOS的渐变滚动条方法，这意味着无论如何都没有多少风格。

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

Answer 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

Answer 3

移动safari不支持div滚动，你可以使用iscoll framework

移动webkit滚动条

3 个答案: