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

Question

此代码非常适合样式化滚动条：

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: #000;
}
.frame::-webkit-scrollbar:horizontal {
    height: 6px;
}
.frame::-webkit-scrollbar-thumb {
    background-color: #000;
}
.frame::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #333;
}

但每次我想让它启用触摸功能（以便在移动设备上滚动时），所有滚动条都会消失

.frame {
    -webkit-overflow-scrolling: touch;
}

有什么解决方案可以在 iOS 或手机中保持滚动条？

Answer 1

您可以使用 css 为 webkit 浏览器自定义滚动条样式，或者启用

    -webkit-overflow-scrolling: touch;

他们两个在最新的 safaris 中没有一起工作。如果您同时放置两者，则仅触摸即可。在 Iphone 5 和 6

中测试

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

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

css

scroll

webkit

ios