CSS overflow scrolling and hidden scrollbar (iOS)

Question

In my application I need to use

-webkit-overflow-scrolling: touch; 

Because scrolling on iOS seems tough. But I need to hide the scroll bar.

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 still see the scroll bar ...

Answer 1

I just played around with this CodePen, and it seems that if you set transparent background-color for all three properties below (and also remove box-shadow s in this example), the scrollbar will not be 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 has been tested on Chrome Desktop, Chrome for Android, and iOS Safari (v8.4) on iPhone 6+.

However, I would recommend, for the convenience of the user (usability / accessibility), to keep the scroll bar visible, although even I, knowing what I was doing, got a little confused when the scroll bar was missing.

Answer 2

At the time of writing (2019), I think the only way to handle this is 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> 

Answer 3

Just styling regular CSS and I don’t know why it works perfectly ...

 .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

As you can see 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.