javascript 滚动动画后的跳跃滚动

Question

滚动动画有问题。在滚动动画后滚动页面时会发生跳动滚动。我怀疑滚动事件会重复发生，但我不确定。你能帮我吗？

$(document).ready(function(){
var offset;
var anchor = $("#navigation").offset().top;  
$(window).bind('mousewheel', function (e) {
offset = $(window).scrollTop();

if (e.originalEvent.wheelDelta < 0) {
    //mouse scroll down
    console.log('Down: ' + offset + " " + anchor);

    if (offset >= anchor) {
        // if anchor has been scrolled, user can scroll further
        // the problem ocuurs in this block
        return true;
    } else {
        // animate to anchor( nav menu)
        $("body, html").animate({
            scrollTop: anchor + 1
        }, 200);
        $("#navigation").addClass("nav-fixed");
        return false;
    }
} else {
    //mouse scroll up
    if (offset < anchor) {
        $("#navigation").removeClass("nav-fixed");
        return true;
    }
}});

});

JSFiddle：http://jsfiddle.net/0noms3cs/

非常感谢！

Answer 1

你的问题很简单。滚动事件一遍又一遍地触发。您对导致此问题的原因的想法是正确的，您有大量 animate 事件堆积起来导致了这种奇怪的行为。

~~您可以通过添加一个布尔变量（例如 scrollInitialized）来解决此问题，该变量以 false 开头并在滚动后翻转为 true事件已触发一次。~~

~~这是修改后的 JS 代码。注意：我只添加了 scrollInitialized 变量并在 if 语句中对其进行了检查。~~

~~编辑：我还删除了内部 if-else 外壳，因为没有必要使用此设计。~~

编辑 2：我最初误解了你想做什么。您需要做的是添加一个 scrollLock 变量，该变量只会在动画持续期间设置为 true。想到这里，我就给你实现了。这是 Jsfiddle：

https://jsfiddle.net/04gaaapo/1/

这是新的 JS 代码：

$(document).ready(function () {

    var scrollLock = false;
    var offset;
    var anchor = $("#navigation").offset().top;

    $(window).bind('mousewheel', function (e) {
        offset = $(window).scrollTop();

        // if scroll is NOT locked and we are above the anchor
        if (scrollLock === false && offset < anchor) {
            if (e.originalEvent.wheelDelta < 0) {
                // scrolling down
                scrollLock = true;

                // animate to anchor( nav menu)
                $("body, html").animate({
                    scrollTop: anchor + 1
                }, 200);

                // unlock in 250ms
                setTimeout(toggleLock, 250);

                // add nav class
                $("#navigation").addClass("nav-fixed");

            } else if (e.originalEvent.wheelDelta > 0) {
                // scrolling up
                scrollLock = true;

                // animate to top of page
                $("body, html").animate({
                    scrollTop: 0
                }, 200);

                // unlock in 250ms
                setTimeout(toggleLock, 250);

                // remove nav class
                $("#navigation").removeClass("nav-fixed");

            }
        }

    });

    function toggleLock() {
        scrollLock = !scrollLock;
    };

});

javascript 滚动动画后的跳跃滚动

Jumpy scroll after scroll-animation with javascript

javascript

jquery

jquery-animate