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

Posted 2023-03-05

【中文标题】使用 -webkit-overflow-scrolling 时更改 HTML 滚动条颜色：触摸

【英文标题】：change HTML scrollbar color when using -webkit-overflow-scrolling: touch

【发布时间】：2015-09-18 12:47:13

【问题描述】：

我有一个带有 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/

【问题讨论】：

你能发布你的html或JsFiddele代码吗

jsfiddle.net/rmcadbmq/3

@quemeful 我也遇到了同样的问题...你找到解决方案了吗？

【参考方案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);

【讨论】：

该代码可以改变颜色。但主要问题是，它需要我将 -webkit-overflow-scrolling 更改为“滚动”而不是“触摸”，所以我失去了类似 Safari 的滚动加速。

请使用 !important 的每一个地方然后我认为你的问题会得到解决。

【参考方案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; 

【讨论】：

在触摸屏设备上试一试...它失去了滚动的触摸动量：jsfiddle.net/rmcadbmq/10

您的实际问题是什么？我认为它解决了颜色问题

问题是当 -webkit-overflow-scrolling 设置为“touch”时我无法更改颜色...我将其切换为 jsfiddle...10 以上的“scroll”

在触摸屏设备上没有动量滚动......我认为这是 webkit css 中的一个重大疏忽