iOS：有啥方法可以让 -webkit-overflow-scrolling 和 ::-webkit-scrollbar 一起工作？

Posted 2023-05-09

【中文标题】iOS：有啥方法可以让 -webkit-overflow-scrolling 和 ::-webkit-scrollbar 一起工作？

【英文标题】：iOS: any way to make -webkit-overflow-scrolling and ::-webkit-scrollbar work together?iOS：有什么方法可以让 -webkit-overflow-scrolling 和 ::-webkit-scrollbar 一起工作？

【发布时间】：2016-08-21 01:01:09

【问题描述】：

我正在尝试将自定义样式应用于滚动条（实际上，尝试使滚动条始终可见）并且保持 ios 应用的滚动势头：

#container 
    height: 400px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;


#container::-webkit-scrollbar 
    -webkit-appearance: none;
    background-color: #000;


#container::-webkit-scrollbar:horizontal 
    height: 6px;


#container::-webkit-scrollbar-thumb 
    background-color: #000;


#container::-webkit-scrollbar-track 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #333;

但是-webkit-overflow-scrolling: touch 和::-webkit-scrollbar 样式不能一起使用。 *** 上已经有一个相关的问题：

-webkit-overflow-scrolling: touch breaks my -webkit-scrollbar css in iOS

那么，从 2016 年春季的高度开始，有没有什么办法可以在设置滚动条样式的同时实现动量滚动？如果有其他方法可以伪造它，我准备放弃-WebKit-overflow-scrolling: touch。

请不要建议使用 niceScroll、iScroll 等 - 我已经尝试过这些；实际上，我目前正在使用其中一种脚本，并希望摆脱它。

【问题讨论】：

Here's the bug report. 评论让 Apple 知道它对你很重要。

-webkit-overflow-scrolling: touch breaks my -webkit-scrollbar css in iOS的可能重复

【参考方案1】：

正如上面链接的线程中提到的，-webkit-overflow-scrolling: touch 与您的-webkit-scrollbar 属性不兼容。如果您不想下载第 3 方滚动条，则必须编写一些自定义 JS 来获得您正在寻找的功能。