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。