Geek Answers Handbook

Why doesn't pulse scrolling work here? (using -webkit-overflow-scrolling: touch)

I am trying to scroll the scroll to work by setting a class called impulse scrolling at the top level of the div that wraps part of the scrollable content. A class is defined as:

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

However, it does not work (testing in the simulator on both iOS 7.1 and 8.1).

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

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

Here is a link to editable material on jsbin:

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

(Please note that the CSS shown includes a mini bootstrap bootstrap and a few other things. I left it this way because although it is a bit more difficult to edit, I tried to reproduce the problem exactly as we have on our site, in case something that we do causes a problem.)

Update

I have a modified version here ( http://jsbin.com/sibofucexe/1 ) where I changed the .momentum scroll style to include position: fixed, height / width 100% (based on some other posts that I found with examples of scrolling by impulses):

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

And what it does now allows you to work with inertial / impulse scrolling!

, (, DOM JavaScript, - ajax ).

? ?

+4
1

, , Googlers:

CSS Tricks, overflow: scroll, overflow: auto. , .

+1

More articles:


All Articles