Mobile Safari scroll momentum not working

I just had the same problem. I found this link, which solved the issue.

Add this line of css to the element that scrolls: -webkit-overflow-scrolling: touch;

#element_that_scrolls
{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
}

Only the body getting the native scrolling. Any elements that have overflow scroll are really slow. touch scrolling can fix that but it's better to let the body scroll if you can. It's much faster and uses the GPU texture compositing much better.

Touch scroll with create a snapshot of the scrollable element when you start scrolling. It adds that image to as a GPU texture then when you stop scrolling it destroys the GPU texture. Letting the body scroll uses your texture memory better and it usually the better solution.


Along with what @Mark have said, regarding the css property, we need to remember that this property needed to be given to the parent of the scrolled content.

Meaning momentum can work on the container of the needed to be scrolled content. Not on the content directly, otherwise he just can't understand how and for what to give the momentum.

.element_that_scrolls
{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
} 

//Wrong
<ul class="element_that_scrolls">
    ...
</ul>

//Correct
<div class="element_that_scrolls">
    <ul>
        ...
    </ul>
</div>