Fix Webkit Rubber Band ScrollJune 8, 2014

The rubber effect on scrolling overflow is inconsistent. iOS webkit has nice rubber effect when you scroll the content over the maximum of minimum. But it only works as expected when you start scrolling at not the maximum or minimum. Initially, when scrollTop of scrollable is 0, and you try to scroll down, the whole page rubbers instead (image at left). What the heck?

But - scroll up a bit, few pixels only, stop, scroll down - see, now the scrollable rubbers (image at right). That is what we want always. Almost the same on OSX desktop webkit/blink, with the slight difference that scrollable has no rubber at all, but initially whole page rubbers in a same way as in iOS.

To normalize this and liquidate page rubber one needs to scroll the scrollable 1px away at the the minimum/maximum if scroll ended up there. You simply need to call that function below inside scroll event handler.

    function webkitOverflowScrollingFix(scr) {
        var top = scr.scrollTop
        if ( !top ) scr.scrollTop++
        // in case clientHeight is fractional we need to floor the result
        if (top == ~~(scr.scrollHeight - scr.clientHeight)) scr.scrollTop--
    }

webkitOverflowScrollingFix.js

I have written small snippet, ready to include, free of dependancies. Grab it here https://github.com/atirip/webkitOverflowScrollingFix.js

And check out the demo