【问题标题】:fullpage.js scrolling the slidersfullpage.js 滚动滑块
【发布时间】:2016-02-24 09:26:42
【问题描述】:

刚开始使用 fullPage.js。 我在实践中写了一些滑块,发现滑块滚动无法通过鼠标滚轮控制。阅读帮助文档 (https://github.com/alvarotrigo/fullPage.js),但仍然没有发现任何参数可以提供帮助。 那么有人可以给我一些关于如何解决这个问题的建议吗?

代码:

 $(function () {
  $("#dowebok").fullpage({
    verticalCentered: false,
    anchors: ['page1', 'page2', 'page3', 'page4'],
    navigation: true,
    navigationTooltips: ['1', '2', '3', '4'],
  });
});

问题解决了,代码如下:

 $('.slider-section').bind('mousewheel DOMMouseScroll', function (e) {
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      if (!$('.first-slide').hasClass('active')) {
        $.fn.fullpage.moveSlideLeft();
      } else {
        $.fn.fullpage.moveSectionUp();
      }
    } else {
      if (!$('.last-slide').hasClass('active')) {
        $.fn.fullpage.moveSlideRight();
      } else {
        $.fn.fullpage.moveSectionDown();
      }
    }
    return false;
  });

【问题讨论】:

    标签: javascript jquery fullpage.js


    【解决方案1】:
    $('.slider-section').bind('mousewheel DOMMouseScroll', function(e){
        if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0){
            $.fn.fullpage.moveSlideLeft();   
        }else{
             $.fn.fullpage.moveSlideRight();
        }
        return false;
    });
    

    它在 chrome 中工作,以便在其他浏览器中工作,您需要禁用 fullpage.js 滚动

    $.fn.fullpage.setAllowScrolling(false);
    

    但您不能将其设置在 afterLeaveonLoad 事件中,但它是您如何做到这一点的起点。

    【讨论】:

    • 好吧,现在出现了一个新问题,它在滑块部分被阻塞,滚动不会向上/向下移动到另一个部分
    • 我给出了一个起点,你可以确定例如 $('.last-slide').hasClass('.active'){ $.fn.fullpage.setAllowScrolling(true); }
    猜你喜欢
    • 1970-01-01
    • 2015-06-30
    • 2015-12-31
    • 1970-01-01
    • 2019-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-19
    相关资源
    最近更新 更多