Question

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

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

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

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

Answer 1

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

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

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

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

1 个答案: