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!

但是，现在我失去了点击顶部栏以将窗口滚动到顶部的能力，并且偶尔无法向上或向下滚动（通常是在JavaScript操纵DOM时，由于ajax命中添加了更多数据） 。

对这些问题有什么想法吗？我做错了吗？

Answer 1

我知道这是一个迟到的回复，但为了未来的 Google 员工：

根据CSS Tricks，你必须使用overflow: scroll而不是overflow: auto. 这可能会使您的第一个示例起作用。