0

我有一个视差/动画页面，我在其中固定一个元素在其容器的持续时间内。我还使用以下功能覆盖自然鼠标滚动行为：

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 元素滚动平滑）。

我已经用谷歌搜索并阅读了 scrollmagic 文档，但仍然不知道如何使其顺利进行。有任何想法吗？

编辑：

这是显示问题的两个小提琴：

没有波涛汹涌的平面，但没有平滑的滚动 -> http://codepen.io/anon/pen/azexRm

断断续续的平面 + 平滑滚动 -> http://codepen.io/anon/pen/wBVZYQ

4

0 回答 0