Question

可以使平滑滚动动画从网页的一个部分转到另一个部分。如今，一些浏览器（例如Chrome for 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

有this project提供jQuery过度插播插件。它可能正是你要找的东西。示范on this page。

启用JavaScript的过度滚动

2 个答案: