Scroll on iOS is jumpy for overflow elements (lightwindow)

Question

I have a light window with fixed position at 100% width and height on the mobile with overflow-y auto as light window is larger then most mobile displays. Following are two css classes that i have

.noscroll { // add to body when the lightwindow shows to prevent body scrolling
    overflow: hidden !important;
}
.lightwindow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

It is working fine except on iPhone the scrolling is very choppy and jumpy, I would like it to scroll just like regular smooth scrolling on iPhone.

Thanks

Answer 1

You are looking for momentum type scrolling for touch devices like iphone where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping. Chris Cover has a solution explained here

To apply it to your code, you should add -webkit-overflow-scrolling: touch; your lightwindow class and also overflow-y: scroll; so it will become something like the following

.lightwindow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
}

Hope this helps.