CSS溢出滚动和隐藏滚动条（IOS）

Question

在我的应用程序，我需要使用

-webkit-overflow-scrolling: touch; 

因为iOS上滚动的感觉“硬”。但我需要隐藏滚动条。

我有这样的事情：

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

.container::-webkit-scrollbar { 
    display: none; 
    height: 0; 
    width: 0; 
} 

现在滚动的感觉非常流畅，但我仍然可以看到滚动条...

Answer 1

我刚刚有了一个发挥这一codepen（https://codepen.io/devstreak/pen/dMYgeO）看起来如果您将background-color设置为transparent以下所有三个属性，滚动（并且在此示例中还删除了box-shadow s），滚动条根本不可见：

#style-1::-webkit-scrollbar-track 
{ 
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1); 
    background-color: transparent; 
} 

#style-1::-webkit-scrollbar 
{ 
    background-color: transparent; 
} 

#style-1::-webkit-scrollbar-thumb 
{ 
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: transparent; 
} 

这是在iPhone 6+上的Chrome桌面，Android版Chrome和iOS Safari（v8.4）版本中测试的。

但是，我会推荐用户体验（可用性/可访问性）来保持滚动条可见，因为即使我知道我在做什么，当没有滚动条时也会有点困惑。