我有一个视差/动画页面,我在其容器的持续时间内固定一个元素。我还使用函数覆盖自然鼠标滚动行为:
function smoothScroll() {
var $window = $(window);
var scrollTime = 1;
var scrollDistance = 400;
$window.on("mousewheel DOMMouseScroll", function (event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta / 120 || - event.originalEvent.detail / 3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta * scrollDistance);
TweenMax.to($window, scrollTime, {
scrollTo: { y: finalScroll, autoKill: true },
ease: Power1.easeOut,
overwrite: 5
});
});
}
这似乎导致我的固定元素不稳定并且落后,我怀疑原因是scrollMagic在不自然的滚动完成之前再次更新我的固定元素的位置(没有我的smoothscroll,pinend元素滚动平滑)。 / p>
我用google搜索并阅读了滚动文档,但仍然无法如何使其顺利进行。有什么想法吗?
修改
以下是两个显示问题的小提琴:
没有波涛汹涌的飞机,但没有平滑的滚动 - > http://codepen.io/anon/pen/azexRm
Choppy plane + smooth scrolling - > http://codepen.io/anon/pen/wBVZYQ