html - 溢出滚动时隐藏WebKit滚动条 : touch is enabled

Question

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

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

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

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

Answer 1

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

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

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