jQuery mousewheel檢測向上和向下滾動

我有幾個部分（每個大小100％x 100％ - 全屏），它們是固定的並且使用z-index彼此重疊。我想檢測鼠標滾動並使用jQuery顯示相應的部分（基本上，像fullpage.js，但我會有不同的動畫）。我閱讀了很多問題並嘗試了下面的代碼，但不起作用。jQuery mousewheel檢測向上和向下滾動

的Javascript：

$(document).ready(function(){ 
    sections=["intro","features","gallery","contact"] 
    cs=0; 
    $(window).on('mousewheel DOMMouseScroll', function(e){ 
     if(e.originalEvent.detail > 0) { 
      //scroll down - Show next section 
      if(cs < (sections.length-1)){ 
       $("#"+sections[cs]).fadeOut(); 
       cs+=1; 
       $("#"+sections[cs]).fadeIn(); 
      } 
     } 
     else{ 
      //scroll up - Show previous section 
      if(cs > 0){ 
       $("#"+sections[cs]).fadeOut(); 
       cs-=1; 
       $("#"+sections[cs]).fadeIn(); 
      } 
     } 
     return false; 
    }); 
});

HTML：

<section id="intro"> 
    <div class="content"> 
     <h1>Intro</h1> 
    </div> 
</section> 
<section id="features"> 
    <div class="content"> 
     <h1>Features</h1> 
    </div> 
</section> 
<section id="gallery"> 
    <div class="content"> 
     <h1>Gallery</h1> 
    </div> 
</section> 
<section id="contact"> 
    <div class="content"> 
     <h1>Contact Us</h1> 
    </div> 
</section>

要看到整個代碼，在你需要它時，visit github

來源

2017-07-23 Manikiran

所以我檢查的行爲在的jsfiddle https://jsfiddle.net/oobmky4n/，基本上你的問題似乎是

e.originalEvent.detail

始終爲0，而是要使用

e.originalEvent.deltaY

我只測試了它在Safari現在，但它似乎工作。還似乎是由https://developer.mozilla.org/en-US/docs/Web/Events/wheel

加成被反射的連續滾動期間停止：

一種可能的方案是具有超時的標誌。我在這裏更新了我的原始文件：https://jsfiddle.net/oobmky4n/2/ 正如您所看到的，一旦成功滾動發生，我們就設置isScrolling。在設置標誌後不滾動250ms後，我們恢復到非滾動狀態。

if(isScrolling) { 
    clearTimeout(resetScroll) 
    resetScroll = setTimeout(function() { 
     isScrolling = false 
    }, 250); 
    }

來源

2017-07-23 13:32:03

當我這樣做的時候，它會在一個卷軸中從第一個滑動到最後一個滑動。我希望它在用戶滾動時只顯示一張幻燈片...無論他滾動多長時間 – Manikiran

我不認爲這很容易在本地進行。最簡單的方法可能只是在超時時包含一個標誌。看看這個可能的解決方案：https://stackoverflow.com/a/14092859/1800184 –

它沒有按預期工作，但有些作品！謝謝：） – Manikiran

jQuery mousewheel檢測向上和向下滾動

回答

相關問題