[英]change HTML scrollbar color when using -webkit-overflow-scrolling: touch
I have a iOS app that has a WebKit webview (WKWebView) and I want to change the color of the scrollbar in my HTML with CSS while still retaining the touch / throw acceleration scrolling. 我有一个具有WebKit Webview(WKWebView)的iOS应用,我想用CSS更改HTML中滚动条的颜色,同时仍保持触摸/抛出加速滚动。
I have tried using: 我试过使用:
::-webkit-scrollbar-thumb {
background-color: #ff4872;
}
...but to no avail. ...但无济于事。 Because it doesn't change the color unless I set the webkit scrolling setting to scroll:
因为除非将webkit滚动设置设置为“ scroll”,否则它不会改变颜色:
-webkit-overflow-scrolling: scroll;
...which takes away the Safari-like acceleration scrolling. ...消除了类似Safari的加速滚动。 I would like a pure CSS solution if possible, but I can do JavaScript or JQuery if that is the only option.
如果可能的话,我想要一个纯CSS解决方案,但是如果那是唯一的选择,我可以使用JavaScript或JQuery。
JSFiddle: https://jsfiddle.net/rmcadbmq/3/ JSFiddle: https ://jsfiddle.net/rmcadbmq/3/
Using Below code you will solve your issue 使用下面的代码,您将解决您的问题
::-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);
}
I think it will work for you: 我认为它将为您工作:
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.