使用-webkit-overflow-scrolling時更改HTML滾動條顏色：觸摸

Question

我有一個具有WebKit Webview（WKWebView）的iOS應用，我想用CSS更改HTML中滾動條的顏色，同時仍保持觸摸/拋出加速滾動。

我試過使用：

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

...但無濟於事。 因為除非將webkit滾動設置設置為“ scroll”，否則它不會改變顏色：

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