javascript - 使用 -webkit-overflow-scrolling : touch 时更改 HTML 滚动条颜色

Question

我有一个带有 WebKit webview (WKWebView) 的 iOS 应用程序，我想使用 CSS 更改 HTML 中滚动条的颜色，同时仍保留触摸/ throw 加速滚动。

我试过使用:

::-webkit-scrollbar-thumb {
    background-color: #ff4872;
}

...但无济于事。因为它不会改变颜色，除非我将 webkit 滚动设置设置为滚动:

-webkit-overflow-scrolling: scroll;

...这消除了类似 Safari 的加速滚动。如果可能的话，我想要一个纯 CSS 解决方案，但如果这是唯一的选择，我可以使用 JavaScript 或 JQuery。

JSFiddle:https://jsfiddle.net/rmcadbmq/3/

Answer 1

使用下面的代码你会解决你的问题

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);     
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}