可以制作平滑的滚动动画,从网页的一部分转到另一部分。现在,一些浏览器(例如 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-transition: height .5s;
关于启用 JavaScript 的过度滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12121179/