CSS overflow scrolling and hidden scrollbar (iOS)
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>
How to get the scroll bar with CSS overflow on iOS
Edit following the comment left, kindly, by kritzikratzi:
[Starting] with ios 5beta a new property
-webkit-overflow-scrolling: touch
can be added which should result in the expected behaviour.
Some, but very little, further reading:
- Native momentum scrolling in iOS 5
Original answer, left for posterity.
Unfortunately neither overflow: auto
, or scroll
, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.
Instead, as you've found, users are required to perform the two-finger swipe in order to scroll the overflow
-ed content. The only reference, since I'm unable to find the manual for the phone itself, I could find is here: tuaw.com: iPhone 101: Two-fingered scrolling.
The only work-around I can think of for this, is if you could possibly use some JavaScript, and maybe jQTouch, to create your own scroll-bars for overflow
elements. Alternatively you could use @media queries to remove the overflow
and show the content in full, as an iPhone user this gets my vote, if only for the sheer simplicity. For example:
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />
The preceding code comes from A List Apart, from the same article linked-to above (I'm not sure why they left of the type="text/css"
, but I assume there are reasons.
CSS - Overflow: Scroll; - Always show vertical scroll bar?
Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.
The fix: In your css include -
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
/* always show scrollbars */
::-webkit-scrollbar { -webkit-appearance: none; width: 7px;}
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(255, 255, 255, .5);}
/* css for demo */
#container { height: 4em; /* shorter than the child */ overflow-y: scroll; /* clip height to 4em and scroll to show the rest */}
#child { height: 12em; /* taller than the parent to force scrolling */}
/* === ignore stuff below, it's just to help with the visual. === */
#container { background-color: #ffc;}
#child { margin: 30px; background-color: #eee; text-align: center;}
<div id="container"> <div id="child">Example</div></div>
Related Topics
How Do Min-Content and Max-Content Work
Css Selector - Element With a Given Child
How to Properly Display an Iframe in Mobile Safari
External CSS VS Inline Style Performance Difference
How to Determine What Font a Browser Is Actually Using to Render Some Text
How to Create Multi-Color Border With Css
Why ≪Textarea≫ and ≪Textfield≫ Not Taking Font-Family and Font-Size from Body
How to Display a Reverse-Ordered List in Html
My CSS Is Not Getting Injected Through My Content Script
Ordering of Vendor-Specific CSS Declarations
CSS @Font-Face - What Does "Src: Local('☺')" Mean
How to Override the Properties of a CSS Class Using Another CSS Class
What Is the Value of the CSS 'Ex' Unit
Fill Background Color Left to Right CSS
Add a CSS Class to a Field in Wtform
When Setting a Font-Size in CSS, What Is the Real Height of the Letters