javascriptoverscroll

JavaScript-enabled overscrolling

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?

Solution

  • 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; }