How to get the scroll bar with CSS overflow on iOS

Question

Developing an iPad website I tried to use the CSS property overflow: auto to get the scrollbars if needed in a div, but my device is refusing to show them even if the two fingers scroll is working.

I tried with

overflow: auto;

and

overflow: scroll;

and the result is the same.

I'm only testing on an iPad (on desktop browsers works perfectly).

Any ideas?

my problem is described very well here: http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html — mat_jack1, Oct 02 '10 at 11:28

score 115 · Accepted Answer · edited May 23 '17 at 12:02

115

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.

edited May 23 '17 at 12:02

Community

1
1

answered Oct 02 '10 at 12:19

David Thomas

249,100
51
377
410

that's very useful! So there aren't CSS-only ways to achieve this? – mat_jack1 Oct 02 '10 at 12:36
Sadly not, all variations of css that might apply scroll-bars to page elements are, unfortunately, *verboten*. The only options are: 1, use JavaScript to emulate (what should be a native function) or, preferably, 2, use the @media queries to create mobile-specific stylesheets that obviate the need for scrolling-elements. – David Thomas Oct 02 '10 at 12:41
13

starting with ios 5beta a new property -webkit-overflow-scrolling:touch can be added which should result in the expected behaviour. – kritzikratzi Jul 13 '11 at 13:41
@kritzikratzi: thank you for the update! I hadn't heard anything of that, 'til now; interesting find :) – David Thomas Jul 13 '11 at 19:34
I found http://filamentgroup.github.com/Overthrow/ Overthrow.js to polyfill for devices that don't support overflow:scroll such as iOS4. – Galaxy Oct 04 '12 at 02:46
2

Very interesting solution.... unfortunately with this method scrollbar is visible only during scrolling, and not always..... – Luca Detomi May 07 '14 at 07:50
yes, i am looking for a way to show it initially for a second (using it in a scrollable "click to open menu"). tried triggering scrollTop, but doesnt work in ios. any ideas someone? – Björn Aug 09 '14 at 10:55

score 20 · Answer 2 · edited Dec 18 '14 at 03:37

20

Apply this code in your css

::-webkit-scrollbar{

    -webkit-appearance: none;
    width: 7px;

}

::-webkit-scrollbar-thumb {

    border-radius: 4px;
    background-color: rgba(0,0,0,.5); 
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

edited Dec 18 '14 at 03:37

Patrick

3,490
1
37
64

answered Nov 20 '14 at 14:35

Prafull

591
6
16

1

This worked perfeclty on Chrome's IPAD simulator. I've yet to try it on an actual IPAD but fingers crossed, thank you ! – user2808054 Feb 17 '16 at 13:40

score 19 · Answer 3 · answered Jun 05 '14 at 21:32

I have done some testing and using CSS3 to redefine the scrollbars works and you get to keep your Overflow:scroll; or Overflow:auto

I ended up with something like this...

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); 
}

The only down side which I have not yet been able to figure out is how to interact with the scrollbars on iProducts but you can interact with the content to scroll it

also this scrollbar wont be on top of the content but be like in windows where it occupies its own space (pushes content to the left). or any ideas as to avoid that? — Björn, Aug 09 '14 at 10:56
For the record, `::-webkit-scrollbar` does not work for iPhone 4/iOS 7. — lulalala, Feb 03 '16 at 03:58

score 6 · Answer 4 · answered Sep 26 '12 at 23:04

Solution given by Chris Barr here

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
    }
}

Works fine for me. Remove event.preventDefault if you need to use some clicks...

score 2 · Answer 5 · answered Jan 30 '14 at 05:27

2

In my experience you need to make sure the element has display:block; applied for the -webkit-overflow-scrolling:touch; to work.

answered Jan 30 '14 at 05:27

camslice

571
6
8

1

it doesnt work for me.. chorme says that -webkit-overflow-scrolling:touch; is invalid – Victor Hugo Arango A. Jul 05 '17 at 21:29

score 2 · Answer 6 · edited May 23 '17 at 12:34

Other 2 peoples on SO proposed possible CSS-only solution to the problem. David Thomas' solution is perfect but has the limit that scrollbar is visible only during scrolling.

In order to have scrollbars always visible, is possible to followin guidelines suggested on the following links:

score 2 · Answer 7 · answered Dec 01 '14 at 14:13

2

make sure your body and divs have not a

  position:fixed

else it would not work

answered Dec 01 '14 at 14:13

Matoeil

6,851
11
54
77

score 2 · Answer 8 · answered Apr 21 '11 at 00:30

2

The iScroll4 javascript library will fix it right up. It has a hideScrollbar method that you can set to false to prevent the scrollbar from disappearing.

answered Apr 21 '11 at 00:30

Dan Gayle

2,277
1
24
38

score 1 · Answer 9 · answered Feb 08 '17 at 07:58

1

Works fine for me, please try:

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

answered Feb 08 '17 at 07:58

Sky Yip

1,059
12
10

score 1 · Answer 10 · answered Jul 17 '17 at 09:29

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

Use this code, it work in ios/android APP webview; It delete some not portable css code;

score 0 · Answer 11 · answered Mar 01 '16 at 19:13

If you are trying to achieve horizontal div scrolling with touch on mobile, the updated CSS fix does not work (tested on Android Chrome and iOS Safari multiple versions), eg:

-webkit-overflow-scrolling: touch

I found a solution and modified it for horizontal scrolling from before the CSS trick. I've tested it on Android Chrome and iOS Safari and the listener touch events have been around a long time, so it has good support: http://caniuse.com/#feat=touch.

Usage:

touchHorizScroll('divIDtoScroll');

Functions:

function touchHorizScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollLeft+event.touches[0].pageX;              
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollLeft=scrollStartPos-event.touches[0].pageX;              
        },false);
    }
}
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

Modified from vertical solution (pre CSS trick):

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

How to get the scroll bar with CSS overflow on iOS

11 Answers11

Linked