隐藏的WebKit滚动条时溢出滚动:触摸启用
问题描述:
大家都知道,你可以隐藏在Safari和铬滚动条与下面的CSS代码片段:隐藏的WebKit滚动条时溢出滚动:触摸启用
::-webkit-scrollbar {
display: none;
}
然而,这似乎并没有工作当-webkit-overflow-scrolling
设置为touch
时,特别是在iOS上。 Chromium正确隐藏了滚动条。
这是一个WebKit错误,还是有办法隐藏滚动条并启用流体(触摸)滚动?这似乎是可能的(也许与js?),在移动版本Google。通过页面源查看和谷歌搜索我的答案似乎没有帮助,但。
答
看来,目前(截至2017年1月)解决此问题的唯一方法是将父级div中的可滚动元素包装起来,并从视图中手动隐藏滚动条。
这可以通过应用一个固定的高度/宽度和overflow: hidden;
到父div来实现。然后,您可以向原始元素添加额外的填充或高度/宽度,实质上,将滚动条从视图中移出。
Mark Ottotweeted 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;
}
+0
谢谢!对不起,延迟时间很长 - 我不经常在这里问问题。 –
支持水平正在开发中。这就是苹果说:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-滚动 可能会有一些破解。 – Veer
谢谢。我会找到另一种方法。 –