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

Question

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

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

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

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

Answer 1

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

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

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