Question

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

-webkit-overflow-scrolling: touch;

因为 iOS上的滚动感觉很难＆＃34;但我需要隐藏滚动条。

我有这样的事情：

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

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

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

Answer 1

我只是玩了这个codepen（https://codepen.io/devstreak/pen/dMYgeO），看来如果你为下面的所有三个属性设置background-color到transparent，滚动（在这个例子中）同时删除box-shadow s），根本看不到滚动条：

#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桌面，Chrome for Android和iOS Safari（v8.4）中进行了测试。

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

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

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

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

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

Answer 4

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

只需设置普通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 6

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

似乎可以正常工作。

CSS溢出滚动和隐藏滚动条（iOS）

6 个答案: