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

Question

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

我尝试过使用：

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

...but没有用。因为它不会改变颜色，除非我将webkit的滚动设置设置为scroll：

-webkit-overflow-scrolling: scroll;

...which取消了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; 
}