隐藏的WebKit滚动条时溢出滚动：触摸启用

大家都知道，你可以隐藏在Safari和铬滚动条与下面的CSS代码片段：隐藏的WebKit滚动条时溢出滚动：触摸启用

::-webkit-scrollbar { 
    display: none; 
}

然而，这似乎并没有工作当-webkit-overflow-scrolling设置为touch时，特别是在iOS上。 Chromium正确隐藏了滚动条。

这是一个WebKit错误，还是有办法隐藏滚动条并启用流体（触摸）滚动？这似乎是可能的（也许与js？），在移动版本Google。通过页面源查看和谷歌搜索我的答案似乎没有帮助，但。

来源

2016-11-22 Avery Magnotti

支持水平正在开发中。这就是苹果说：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-滚动可能会有一些破解。 – Veer

谢谢。我会找到另一种方法。 –

看来，目前（截至2017年1月）解决此问题的唯一方法是将父级div中的可滚动元素包装起来，并从视图中手动隐藏滚动条。

这可以通过应用一个固定的高度/宽度和overflow: hidden;到父div来实现。然后，您可以向原始元素添加额外的填充或高度/宽度，实质上，将滚动条从视图中移出。

Mark Otto tweeted about the issue早在2016年6月。以下是他的解决方法示例：https://output.jsbin.com/lohiga。

的基本思路是这样的：

<header> 
    <div> <!-- parent wrapper added --> 
    <nav> 
     <a href="#">First link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Last link</a> 
    </nav> 
    </div> 
</header>

CSS：

header { 
    margin: 20px 0; 
    padding: 10px 5px; 
    text-align: center; 
    background-color: #f5f5f5; 
    border-bottom: 1px solid #ddd; 
} 

// Parent wrapper 
div { 
    height: 30px; 
    overflow-y: hidden; // "crop" the view so the scrollbar can't be seen 
} 

// Original scrollable element 
nav { 
    padding-bottom: 20px; // extra padding to push the scrollbar out of view 
    overflow-x: auto; 
    text-align: center; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
} 

nav a { 
    display: inline-block; 
    padding: 5px 10px; 
}

来源

2017-01-15 03:56:32

谢谢！对不起，延迟时间很长 - 我不经常在这里问问题。 –

隐藏的WebKit滚动条时溢出滚动：触摸启用

回答

相关问题