5

Webページのある部分から別の部分に移動するためのスムーズなスクロールアニメーションを作成できます。現在、一部のブラウザ（Chrome for Macなど）は「オーバースクロール」をサポートしており、多くの場合、スクロールにはオーバースクロールが含まれます。

したがって、従来のスクロールアニメーションは、オーバースクロールせずに非常に人工的に見えます。従来のスクロールアニメーションを強化するためにJavaScriptでWebページをオーバースクロールする方法はありますか？

4

2 に答える 2

4

はい、バウンスバックアニメーションを作成できます。

私はあなたが跳ね返ると言うつもりだったと思います 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; }

于 2012-08-29T21:33:00.940 に答える
0

オーバースクロールプラグインを提供するこのプロジェクトがあります。jQueryそれはあなたが探しているものかもしれません。このページのデモンストレーション。

于 2012-08-28T21:50:04.023 に答える