ioscssscrollbar

CSS overflow scrolling and hidden scrollbar (iOS)


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


Solution

  • 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; }