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

Question

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

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

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

这是一个 WebKit 错误，还是有办法隐藏滚动条并启用流畅（触摸）滚动？在Google 的移动版本上，这似乎是可能的（也许使用 js？）。浏览页面源代码并在谷歌上搜索我的答案似乎没有帮助。

Answer 1

目前（截至 2017 年 1 月）似乎解决此问题的唯一方法是将可滚动元素包装在父 div 内并手动隐藏滚动条。

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

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;
}