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

Question

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

-webkit-overflow-scrolling: touch;

因为iOS上的滚动感觉"很难".但我需要隐藏滚动条.

我有这样的事情:

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

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

现在卷轴感觉非常流畅,但我仍然可以看到滚动条...

Answer 1

如下所示：https : //forum.webflow.com/t/how-do-i-hide-the-browser-scrollbar-from-appearing-when-a-user-scrolls/59643/5

::-webkit-scrollbar {
    display: none; // Safari and Chrome
}

似乎工作。

Answer 2

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

Answer 3

我刚刚玩过这个CodePen，似乎如果你为下面的所有三个属性设置了background-colorto transparent（在这个例子中还删除了box-shadows），滚动条根本不可见：

#style-1::-webkit-scrollbar-track {
  //    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
  background-color: transparent;
}

#style-1::-webkit-scrollbar {
  background-color: transparent;
}

#style-1::-webkit-scrollbar-thumb {
  //    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: transparent;
}

这已在 iPhone 6+ 上的 Chrome 桌面、Android 版 Chrome 和 iOS Safari (v8.4) 中进行了测试。

然而，我会建议用户体验（可用性/可访问性）保持滚动条可见，因为即使我知道我在做什么，当没有滚动条时也会有点困惑。

Answer 4

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

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

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