启用overflow-scrolling: touch时隐藏WebKit滚动条

Question

众所周知，您可以使用以下CSS片段在Safari和Chromium中隐藏滚动条：

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

然而，当-webkit-overflow-scrolling被设置为touch时，特别是在iOS上，这似乎不起作用。Chromium会正确隐藏滚动条。

这是一个WebKit的bug吗？还是有一种方法可以隐藏滚动条并启用流畅（触摸）滚动？在Google的移动版本中似乎是可能的（也许使用js？）。但查看页面源代码和谷歌搜索都没有找到答案。

- Avery Magnotti

---

支持级别正在开发中。这是苹果公司的说法：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling但是可能存在一些技巧可以解决此问题。 - Veer

谢谢。我会寻找另一种方法。 - Avery Magnotti

Answer 1

看起来目前（截至2017年1月），唯一的解决方法是将可滚动的元素包装在一个父div内，手动隐藏滚动条。

可以通过对父div应用固定的高度/宽度和overflow: hidden;来实现。然后，您可以为原始元素添加额外的填充或高度/宽度，从而将滚动条推出视图。

马克·奥托（Mark Otto） 在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;
}

- Ed B

---

谢谢！很抱歉回复晚了 —— 我在这里很少提问。 - Avery Magnotti