Question

我有一个元素，填满了屏幕。在那之下，我有另一个元素，不填充屏幕，但隐藏。所以你不能手动滚动到那个。

填充屏幕的第一个元素具有以下css属性：

header {
    position: relative;
    height: 100vh;
    background-color: green;
}

第二个元素有这些css属性：

#content {
    display: none;
    position: relative;
    height: 1500px;
    width: 100%;
    background-color: yellow;
}

我使用此代码来跟踪滚动：

$('header').bind("DOMMouseScroll mousewheel", function(e) {
   .....
});

在这个方法中，我检查了哪个面板被激活（通过自己创建的布尔值）和方向我滚动到这样做：

$('header').bind("DOMMouseScroll mousewheel", function(e) {
    var wheelDelta = e.originalEvent.wheelDelta;
    if (active === header && wheelDelta <= 0) {
        ......

    }
});

在if语句中，我调用一个方法，在它下方显示#content元素并平滑地滚动到它，当它完成滚动时，它会隐藏我们滚动的元素（header）。我正在使用这段代码：

$('body').bind("DOMMouseScroll mousewheel", function (e) {
    event.preventDefault();
    var wheelDelta = e.originalEvent.wheelDelta;
    $('header').unbind("DOMMouseScroll mousewheel");
    if (active === header && wheelDelta <= 0) {
        showScrollHide(500, content, 1000, header, 250, function () {
            _window.scrollTop(0);
            _scrollBackBtn.fadeIn();
            active = content;
        });
    }
});

每当我在活动时向下滚动header元素时，这都是完美的。它可以平滑地向下滚动到它下面的#content元素。

我有一个按钮向后滚动页面，我有这个代码：

_scrollBackBtn.on('click', function() {
    if (active === content) {
        active = header;
        scrollBackHide(header, content, 500, 250, function() {
            window.location = '#';
        });
    }
});

它也很完美，它会滚动回到页面顶部。

但每当我尝试再次向下滚动时，它都无法做任何事情。这是怎么来的？

我必须在代码中添加$('header').unbind("DOMMouseScroll mousewheel");，否则在最终结果中看起来非常难看。

每当我在同一部分添加$('header').stop();时，它都没有任何区别。

所以我的问题是。如何将.bind方法再次用于同一事物？

Here's a demo if you dont understand what i mean. Whenever you scroll down on the header element, and scroll back up via the button. Its not doing the same again.

Answer 1

当你的鼠标轮处理程序运行一次然后从不重新绑定它们时，你正在取消绑定它们，因此在单击按钮后没有事件处理程序可以对鼠标轮事件作出反应。单击按钮时重新绑定该事件处理程序可以解决问题。

Here is a fiddle that does that and should point you in the right direction.

我将鼠标轮处理程序拉出到一个函数中，这样我们就可以在需要绑定这些事件时重用它：

var handleMouseWheel = function(e){
    e.preventDefault();    
    var wheelDelta = e.originalEvent.wheelDelta;
    if (active === header && wheelDelta <= 0) {
        $('body').unbind("DOMMouseScroll mousewheel");
        showScrollHide(500, content, 1000, header, 250, function () {
            _window.scrollTop(0);
            _scrollBackBtn.fadeIn();
            active = content;
        });
    }        
};

并使用它在单击按钮时重新附加事件处理程序：

_scrollBackBtn.on('click', function () {
    if (active === content) {
        scrollBackHide(header, content, 500, 250, function () {
            window.location = '#';
            active = header;
        });

        $('body').bind("DOMMouseScroll mousewheel", handleMouseWheel);
    }

});

jQuery .bind方法没有工作两次？

1 个答案: