Question

我想使用skrollr.js和fullpage.js库设计我的网站。但是skrollr使用scrollTop的值来转换我们选择的元素，而fullpage.js似乎滚动页面，但他只是更改了视口的最高值，因此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上并向下滚动时，我的视口会转到第三个，因为我多次绑定事件。

我想绑定一个事件，滚动并取消绑定事件可能持续1秒。

Answer 1

现在，fullPage.js包含一个名为scrollBar的选项，因为版本2.4.4使用了scrollTop功能，因此可以正常使用插件，例如您提到的插件或甚至是视差。

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

检查this living example。

scrollBar :(默认为false）。确定是否对站点使用滚动条。如果使用滚动条，autoScrolling功能仍将按预期工作。用户也可以使用滚动条自由滚动网站，滚动完成后，fullPage.js将适合屏幕中的部分。

在Jquery中取消绑定轮子事件

1 个答案: