javascript - Jquery中解除绑定(bind)滚轮事件

Question

我想使用 skrollr.js 和 fullpage.js 库设计我的网站。但是skrollr使用scrollTop的值来转换我们选择的元素，而fullpage.js似乎滚动了页面，但他只是改变了视口(viewport)的顶部值，所以ScrollTop没有改变，skrollr.js无效。

我寻找一些信息，我终于做了我自己的 fullpage.js (我尝试过):

$('.frame').css({
    'height':$(window).height()
});

var active ="section 1";
$(window).bind('mousewheel', function(event) {
    event.preventDefault();
    event.stopPropagation();

    if (event.originalEvent.wheelDelta >= 0) {
        if(active=="section 2"){
            $("html,body").stop().animate({scrollTop: 0}, 1000);
            active="section 1";
        }
        else if(active=="section 3"){
            $("html,body").stop().animate({scrollTop:  $(window).height()}, 1000);
            active="section 2";
        }
    }
    else {
        if(active=="section 1"){
            $("html,body").stop().animate({scrollTop: $(window).height()}, 1000);
            active="section 2";
        }
        else if(active=="section 2"){
            $("html,body").stop().animate({scrollTop: $(window).height()*2}, 1000);
            active="section 3";
        }
    }
});

我有 3 个 div .frame

但是当我在第一个 div 上并向下滚动时，我的视口(viewport)转到第三个，因为我多次绑定(bind)事件。

我想绑定(bind)一个事件，滚动并取消绑定(bind)该事件大约 1 秒。

Answer 1

现在 fullPage.js 从 2.4.4 版本开始包含一个名为 scrollBar 的选项，它使用 scrollTop 功能，因此可以与您提到的插件一起按预期工作，或者甚至视差。

它默认设置为 false，因此您必须在初始化 fullPage.js 时将其打开。

检查this living example .

scrollBar: (default false). Determines whether to use scrol bar for the site or not. In case of using scroll bar, the autoScrolling functionallity will still working as expected. The user will also be free to scroll the site with the scroll bar and fullPage.js will fit the section in the screen when scrolling finishes.