fullpage.js在滚动方向上更改滚动方向

Question

我使用fullpage.js来创建wp站点，我想知道是否可以在用户进入特定页面时更改滚动方向。

更好地说明，让我们用这个这个例子： http://alvarotrigo.com/fullPage/examples/navigationV.html

是否有可能当你访问second slide滚动方向改变到水平？

因此，我不想单击箭头来水平导航，而是希望鼠标滚轮水平滚动。

这是可能与fullpage.js或我必须改变到另一个脚本？

Answer 1

好，这是基本的方法：

1. 当你到了一个需要水平滚动页面，添加一个mousewheel侦听器：
2. 打开滚动事件为向左或向右滑动变化和
3. 阻止默认的鼠标滚轮，除非：
   • 最后一张幻灯片，然后向下滚动或
   • 第一张幻灯片并向上滚动
4. 当您输入另一张幻灯片时关闭侦听器。

还有一些代码可以防止幻灯片加载时发生的事情。

var currentSlide = 0; 
var loaded = false; 
$('#fullpage').fullpage({ 
    navigation: true, 
    navigationTooltips: ['First section', 'Second section', 'Third section'], 
    sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'], 
    loopHorizontal: false, 
    afterLoad: function (anchorLink, index){ 
     loaded = true; 
    }, 
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){ 
     currentSlide = slideIndex; 
     loaded = true; 
    }, 
    onLeave: function(index, nextIndex, direction) { 
     loaded = false; 
     if (nextIndex == 2) { 
      $('#fullpage').on("mousewheel",function(e){ 
       if(loaded){ 
        loaded = false; 
        var delta = e.originalEvent.deltaY; 
        console.log(delta); 

        if(delta>0){ //down 
         if(currentSlide===2){//if last slide 
          $('#fullpage').off("mousewheel"); 
         }else{ 
          $.fn.fullpage.moveSlideRight(); 
          e.preventDefault(); 
          e.stopPropagation(); 
         } 
        }else{ //up 
         if(currentSlide===0){//if first slide 
          $('#fullpage').off("mousewheel"); 
         }else{ 
          $.fn.fullpage.moveSlideLeft(); 
          e.preventDefault(); 
          e.stopPropagation(); 
         } 
        } 
       }else{ //slide still loading, don't scroll 
        e.preventDefault(); 
        e.stopPropagation(); 
       } 
      }); 
     } 
    } 
}); 

JSFiddle

这适用于Chrome。我不知道如何跨浏览器e.originalEvent.deltaY位。您可以用this plugin替换鼠标滚轮处理程序，使其正确跨平台。

---

这是一个完全跨平台解决方案的JSFiddle with jquery.mousewheel。