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

Question

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

-webkit-overflow-scrolling: touch;

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

我有这样的事情：

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

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

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

Answer 1

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

这个想法是让你的容器略高于padding-bottom所需的高度，并用clip-path剪掉出现滚动条的多余空间。

这是一个sn-p：

.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 2

正如其他人所提到的，这是可行的：

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

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

Answer 3

如此处所示：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 4

只是设置普通 CSS 的样式，我不知道为什么它可以完美运行...

.list {
    white-space: nowrap;
    overflow-x: scroll;
    padding-bottom: 15px;
    margin-bottom: -15px;
    -webkit-overflow-scrolling: touch;
}
.list .item {
    display: inline-block;
    width: 80%;
}

Answer 5

在撰写本文时（2019 年），我认为处理此问题的唯一方法是使用溢出隐藏滚动条。

/* box-sizing reset */

* {
  box-sizing: border-box;
}


/* 
   scroll container with overflow
   set to hidden
*/

.container {
  overflow: hidden;
  width: 80vw;
  height: 20vh;
  outline: 1px solid;
}


/*
   scroller overflowing the container by 2rem
   and a 2rem bottom padding to make content 
   match the container height
*/

.scroller {
  display: flex;
  height: calc(100% + 2rem);
  padding-bottom: 2rem;
  overflow-y: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}


/*
  slides
*/

.slide {
  flex: 1 0 100%;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* just a bit of color */

.a {
  background: orangered;
}

.b {
  background: gold;
}

.c {
  background: olive;
}

<div class="container">
  <div class="scroller">
    <div class="slide a">A</div>
    <div class="slide b">B</div>
    <div class="slide c">C</div>
  </div>
</div>

Answer 6

我刚刚玩过this CodePen，似乎如果您将以下所有三个属性的background-color 设置为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) 中进行了测试。

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