JavaScript-enabled overscrolling

Question

One can make smooth scrolling animations to go from one part of a webpage to another. Nowadays, some browsers (e.g. Chrome for Mac) support "overscrolling", and often scrolling involves overscrolling.

So the traditional scrolling animations look quite artificial without overscrolling. Is there a way to overscroll a webpage with JavaScript to enhance the traditional scrolling animation?

score 4 · Accepted Answer · edited Apr 13 '17 at 12:32

4

Yes you can make a bounce back animation.

I assume you meant to say bounce back https://ux.stackexchange.com/questions/13183/name-of-the-touch-ui-overscroll-feature

I just built a quick / buggy one.

var threshold = 400,
    wrap = document.getElementById('wrap'),
    wrapHeight = wrap.offsetHeight,
    pageHeight = (wrapHeight + threshold);

wrap.style.height = pageHeight+'px';

window.addEventListener('scroll', function(){
    var pageY = window.pageYOffset;

    if (pageY > wrapHeight - threshold*1.5) {
        wrap.style.height = wrapHeight+'px';
    }
    if (wrap.offsetHeight === wrapHeight) {
        if ((pageY > wrapHeight - threshold*2.5) ) {
            wrap.style.height = pageHeight+'px';
        }
    }
});

also https://github.com/andrewrjones/jquery.bounceback

the basic idea behind my code: you make the page larger to accommodate the animation. then you reset the page height after scrolling away from the bottom.

to actually make the animation you need to add: #wrap { -webkit-transition: height .5s; }

edited Apr 13 '17 at 12:32

Community

1
1

answered Aug 29 '12 at 21:33

Chris

404
4
13

Sounds great. Could you please provide a fiddle? – Randomblue Aug 29 '12 at 21:38
I imagine the Jquery gitHub link would be preferable considering I wrote this in about 5 mins and it doesn't follow any pattern. The plugin likely has an easy to use api. – Chris Aug 29 '12 at 21:45
I'm just interested in a proof-of-concept. A dirty fiddle is preferable to having to set-up everything. – Randomblue Sep 01 '12 at 22:36
Hum. [Here](http://jsfiddle.net/Nwjzd/1/embedded/result/) is the "full-screen version" (not included in an iframe) and while the result is cool, it's only an emulation. I'm not seeing the "Chrome" behind the page (which is gray on mac). Rather, the "overflow" is white. – Randomblue Sep 02 '12 at 10:56
Add a background image to the body – Chris Sep 02 '12 at 20:13

score 0 · Answer 2 · answered Aug 28 '12 at 21:50

0

There is this project that provides a jQuery overscrolling plugin. It might be what you're looking for. Demonstration on this page.

answered Aug 28 '12 at 21:50

Grampa

1,623
10
25

I'm looking for native overscrolling, not "embedded emulation". Also, the provided demo doesn't seem to overscroll in the sense that the chrome "behind" the page is not shown after the scroll limit. – Randomblue Aug 28 '12 at 21:53

JavaScript-enabled overscrolling

2 Answers2