我们正在使用最少的js和CSS转换3d属性构建平滑的滚动库。我们为此有一个基础(作为附加笔),但是随着我们增加图像和文本内容的数量,动画会开始抖动,有时甚至在滚动时会跳动。我们不确定是否要使用最佳方法来实现这一目标。请检查附带的笔。
$(function () {
$('.wrapper').height($('.smooth').height());
var scrollTimer = null;
$(window).scroll(function () {
if (scrollTimer) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(requestAnimationFrameTog, 5)
});
$(window).resize(function () {
$('.wrapper').height($('.smooth').height());
});
});
function requestAnimationFrameTog() {
scrollTimer = null;
window.requestAnimationFrame(scrollerize);
}
function scrollerize() {
var scroll = window.pageYOffset;
$(".smooth").css({
transform: 'translate3d(0px, -' + scroll + 'px, 0px)'
});
}
Run Code Online (Sandbox Code Playgroud)
谢谢 :)