使用-webkit溢出滚动时更改HTML滚动条颜色:触摸

Question

我有一个iOS应用程序，它有一个WebKit网络视图（WKWebView），我想用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; 
}