css - Scrolling slow on mobile/ios when using overflow:Scroll

Question

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 1

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