CSS 溢出滚动和隐藏滚动条 (iOS)

Question

在我的应用程序中，我需要使用

-webkit-overflow-scrolling: touch;

因为 iOS上的滚动感觉太“硬”了。但我需要隐藏滚动条。

我有这样的事情：

 .container {
  -webkit-overflow-scrolling: touch;
}

.container::-webkit-scrollbar  {
    display: none;
    height: 0;
    width: 0;
}

现在滚动感觉很流畅，但我仍然可以看到滚动条……

原文由 Adrián E. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

截至 2020 年 5 月，这是唯一允许我在 iOS Safari 上隐藏水平滚动条的解决方案——包括当网站作为 PWA 安装在主屏幕上时。

这个想法是使用 padding-bottom 使您的容器略高于它所需的高度，并用 clip-path 出现滚动条的额外空间。

这是一个片段：

 .scroll-container {
  width: 100%;
  padding-bottom: 30px;
  white-space: nowrap;
  overflow: auto;
  clip-path: inset(0 0 30px 0);
}

.item {
  display: inline-block;
  width: 150px;
  height: 300px;
  margin-right: 20px;
  background-color: #ddd;
  border-radius: 20px;
}

 <div class="scroll-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

这确实有增加额外空间的缺点，这确实会压低下面的其他元素。这个问题可以用负边距来否定/阻止。它不会超级干净，但它会起作用。

前任。：

 .scroll-container { margin-bottom: -30px; }

原文由 Émile Perron 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如其他人所提到的，这有效：

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

将其范围限定为要隐藏的滚动条的父容器而不是全局使用它可能是一个好主意。

原文由 NicO 发布，翻译遵循 CC BY-SA 4.0 许可协议