Scrolling slow on mobile/ios when using overflow:Scroll

ios css mobile overflow
grasesed picture grasesed · Nov 9, 2015 · Viewed 33.5k times · Source

To setup an off-canvas menu I have to set the body to "overflow:hidden" to remove scrolling from the body and add it back in to a container around the content with "overflow-y:scroll". When I do this it seems to slow the scrolling on mobile specifically iOS devices.

Is there some sort of performance issue with moving the scrollbar from the body?

Answer

sjm picture sjm · Nov 9, 2015

Rather than a performance issue this is likely that your not seeing 'Momentum' scrolling on your iOS device

This can be solved by adding '-webkit-overflow-scrolling:touch' to your scrolling element i.e:

.scrolling-content {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   height:100%; /*A value other than height:auto needs to be set*/
}

By default iOS devices use 'momentum' scrolling on the body but adding 'overflow-y:scroll' to an element does Not set a element to 'momentum' scrolling by default

See https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling for more info

Note: there's a number of Gotcha/Bugs with using -webkit-overflow-scrolling: touch on certain browsers

Related questions

position: fixed doesn't work on iPad and iPhone

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't …

Read More
screen styling when virtual keyboard is active

Ideally, i would want the entire interface to have a custom styling that is seen on the ios (itouch / ipad) or android equivalent with the virtual keyboard present. See below for more details. A custom set CSS hacking rules to …

Read More
How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

I understand that mobile safari has a lot of bugs around fixed elements, but for the most part I've managed to get my layout working correctly until I added a much needed text input to the fixed navigation at the …

Read More