启用JavaScript的过度滚动



可以制作平滑滚动的动画,从网页的一部分转到另一部分。如今,一些浏览器(如Chrome for Mac)支持"过度滚动",而滚动往往涉及过度滚动。

因此,传统的滚动动画在没有过度滚动的情况下看起来很做作。有没有一种方法可以用JavaScript过度滚动网页来增强传统的滚动动画?

是的,您可以制作反弹动画。

我想你是想说反弹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

我的代码背后的基本思想:您可以使页面变大以容纳动画。然后在从底部滚动后重置页面高度。

要真正制作动画,您需要添加:#包裹{-webkit转换:高度.5s;}

有一个项目提供了jQuery过度滚动插件。这可能就是你想要的。本页演示。

最新更新