CSS overflow scrolling and hidden scrollbar (iOS)

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.

I just played with this CodePen and it seems that if you set the background-color to transparent for all three properties below (and in this example also remove box-shadows), the scrollbar is not visible at all:

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

This was tested in Chrome Desktop, Chrome for Android, and iOS Safari (v8.4) on an iPhone 6+.

I would however recommend for user experience (usability/accessibility) to keep the scrollbar visible though, as even I, knowing what I was doing, got a bit confused when there was no scrollbar.

As others have mentioned, this works:

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

It's probably a good idea to scope it to the parent container of the scrollbar you want to hide and not use it globally.

Just styling normal CSS and I don't know why it's working perfect...

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

At the time of writing (2019) I think the only way to handle this to use overflow to hide the scrollbar.

/* 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>

I had trouble hiding the scrollbar on Safari (iPhone) and couldn’t find an answer, so here’s what worked for me.

What I’m Using:

• React v18
  
• iPhone 13 Mini (iOS 18.0.1)
• Safari (Version based on iOS 18.0.1, as of 02/02/2025)

The Solution:

• Target the #root element:
  In React apps, the main container is usually a div with id="root". In your main CSS file, add:

#root {overflow: hidden;}

This disables scrolling on the root container and removes any scrollbars it might create,

• Set up a scrollable container with hidden scrollbars: Assign a custom class to the main container of the component that will be displayed on the screen (e.g., your Landing.js component).
  

  .main-container { overflow-y: auto; -webkit-overflow-scrolling: touch; }

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

This container handles the scrolling while keeping the scrollbar hidden.

Below is an example of my React tree:

<App>
  <Routes>
    <Route>
      <Landing />
    </Route>
  </Routes>
</App>

Inside Landing.js:

• Assign the .main-container class to the main div.

  < div className="main-container">
  < div className="inner-content">
  {/* Your content here. For example, I have a Hero section, About Us section, etc.. */}
  </ div>
  < /div>

Now, when the content height exceeds the screen height, it will scroll without showing the scrollbar.

I hope this helps anyone facing the same issue on Safari (iPhone)! If you're still stuck, reach out on IG @370zumaya.

Below is an example of my CSS code:

#root {
  /* Manually hide scrollbars */
  overflow: hidden; 
}

.main-container {
  overflow-y: auto; 
}

.inner-content {
  overflow-y: visible; 
}


.main-container::-webkit-scrollbar  {
  display: none; /* Chrome, Safari, Edge */
}

/* Hide all scrollbars on touch devices */
@media (hover: none) {

  /* Blink and WebKit based browsers */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  * {
    scrollbar-width: none;
  }

}