Why isn't momentum scrolling working here? (using -webkit-overflow-scrolling: touch)

Question

I'm trying to get momentum scrolling to work, by setting a class called momentum-scrolling on a top level div that wraps the part of the content that scrolls. The class is defined as:

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

Yet it is not working (testing in simulator on both iOS 7.1 and 8.1).

Here is a link to view the example on jsbin directly (suitable for viewing in a mobile device for testing):

http://jsbin.com/cewobokisi/1/

Here's the link to the editable stuff on jsbin:

http://jsbin.com/cewobokisi/1/edit?html,css,output

(Note that the CSS shown includes minified bootstrap, and a few other things. I left this like this because while it's a bit harder to edit, I was trying to reproduce the issue exactly as we have it in our site now, in case anything we're doing is causing the issue.)

Update

I've got a modified version here (http://jsbin.com/sibofucexe/1) where I've modified the .momentum-scrolling style to include position: fixed, height/width 100% (based on some other posts I found with momentum scrolling examples):

.momentum-scrolling
{
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

And that does now allow for inertial/momentum scrolling to work!

However, now I lose the ability to tap on the top bar to scroll the window to the top, and occasionally I cannot scroll up or down (typically when the DOM is being manipulated by JavaScript, due to an ajax hit to add more data).

Any ideas on these issues? Am I doing this wrong?

Answer 1

I know this is a late reply, but for the sake of future Googlers:

According to CSS Tricks, you must use overflow: scroll rather than overflow: auto. That may cause your first example to work.