取消Jquery中的wheel事件

Question

I want to design my website using skrollr.js and fullpage.js libraries. But skrollr uses the value of scrollTop to transform elements that we choose and fullpage.js seems to scroll the page but he just change the top value of the viewport, so ScrollTop doesn't change and skrollr.js is not effective.

I looking for some informations and i finally do my own fullpage.js (i tried) :

$('.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";
        }
    }
});

I have 3 div .frame

But when i'm on the first div and i scroll down, my viewport go to the third because i bind the event more than one time.

I want to bind one event, scroll and unbind the event for maybe 1 sec.

Answer 1

Now fullPage.js includes an option called scrollBar since version 2.4.4 which uses the scrollTop feature and therefore works as expected with plugins such as the one you mention or even parallax.

It is set to false by default, so you would have to turn it on when initializing fullPage.js.

Check 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.