JavaScript-оверскроллинг

Question

Можно сделать плавную анимацию прокрутки, чтобы перейти от одной части веб-страницы к другой. В настоящее время некоторые браузеры (например, Chrome для Mac) поддерживают "избыточную прокрутку", и часто прокрутка включает в себя избыточную прокрутку.

Таким образом, традиционные анимации прокрутки выглядят довольно искусственно без чрезмерной прокрутки. Есть ли способ прокрутить веб-страницу с помощью JavaScript, чтобы улучшить традиционную анимацию прокрутки?

Answer 1

Да, вы можете сделать анимацию отскок назад.

Я предполагаю, что вы хотели сказать, чтобы прийти в норму https://ux.stackexchange.com/questions/13183/name-of-the-touch-ui-overscroll-feature

Я только что построил быстрый / глючный.

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';
        }
    }
});

также https://github.com/andrewrjones/jquery.bounceback

Основная идея моего кода: вы увеличиваете страницу для размещения анимации. затем вы сбрасываете высоту страницы после прокрутки вниз.

чтобы на самом деле сделать анимацию, вам нужно добавить: #wrap { -webkit-transition: height .5s; }

Answer 2

Есть этот проект, который обеспечивает jQuery плавающий плагин. Это может быть то, что вы ищете. Демонстрация на этой странице.