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

Question

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

-webkit-overflow-scrolling: touch;

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

我有这样的东西：

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

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

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

Answer 1

我刚刚玩过 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;
}

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

不过，为了用户体验 (usability/accessibility)，我建议保持滚动条可见，因为即使我知道我在做什么，当没有滚动条时也会感到有点困惑。

Answer 2

在撰写本文时（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 3

只是样式正常 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 4

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

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

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

最好将它的范围限制在要隐藏的滚动条的父容器中，而不是全局使用它。

Answer 6

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

我们的想法是让您的容器略高于 padding-bottom 所需的高度，并用 clip-path 剪掉滚动条出现的额外 space。

这是一个片段：

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

这确实有添加额外 space 的缺点，这确实会压低下面的其他元素。这个问题可以用负边距来否定/预防。它不会非常干净，但它会起作用。

例如：

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

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

CSS overflow scrolling and hidden scrollbar (iOS)

css

scrollbar

ios