可以使平滑滚动动画从网页的一部分转到另一部分.如今,一些浏览器(例如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
我的代码背后的基本思想：
您将页面放大以适应动画.
然后在从底部滚动后重置页面高度.
实际制作你需要添加的动画：
#wrap {
-webkit-transition：height .5s;
}
