CSS overflow scrolling and hidden scrollbar (iOS)

Question

In my app, I need to use

-webkit-overflow-scrolling: touch;

Because the scroll on iOS feels too "hard". But I need to hide the scrollbar.

I have something like this:

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

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

Now the scroll feels very fluid, but I can still see the scroll bar...

Answer 1

As seen here: 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
}

seems to work.

Answer 2

As of May 2020, this was the only solution that allowed me to hide the horizontal scrollbar on iOS Safari - including when the website is installed on the home screen as a PWA.

The idea is to make your container slightly higher than it needs to be with a padding-bottom, and to clip out that extra space where to scrollbar appears with clip-path.

Here is a snippet:

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

This does have the disadvantage of adding extra space, which does push down the other elements below. This issue could be negated / prevented with a negative margin. It wouldn't be super clean, but it would work.

Ex.:

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