使用 -webkit-overflow-scrolling 时更改 HTML 滚动条颜色：触摸

Question

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

我尝试过使用：

::-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);
}

Answer 2

我认为它对你有用：

.scrollContainer::-webkit-scrollbar-thumb {
    background: #ff4872; 
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(112,0222,0,0.5);

}
.scrollContainer {
    font-size: 2em;
    width: 300px;
    height: 440px;
    background-color: #eee;
    overflow: scroll;
}

.scrollTest {
    width: 270px;
    height: 440px; 
}