如何禁用多個滾動功能？

Question

我正在製作一個頁面，在向下滾動的位置，頁面的左側將向上滑動，頁面的右側將向下滑動。 並且向上滾動時，頁面的左側將向下滑動，頁面的右側將向上滑動。

我有這個工作，如果用戶只能滾動一次（使用鼠標滾輪），當你多次滾動（功能完成前，左側和右側將繼續滾動和混亂。禁用多個卷軸？

我增加了我的代碼和下面的小提琴。

<div class="left"> 
    <div id="left1" class="onLeft Side"> 
    </div> 

    <div id="left2" class="onLeft Side"> 
    </div> 

    <div id="left3" class="onLeft Side"> 
    </div> 
</div> 

<div class="right"> 
    <div id="right3" class="onRight Side"> 
    </div> 

    <div id="right2" class="onRight Side"> 
    </div> 

    <div id="right1" class="onRight Side"> 
    </div> 
</div> 

    $(document).ready(function(){ 
     var wholeHeight = jQuery('.right').height(); 
     var rightLength = jQuery('.onRight').length; 
     jQuery('.right').css({top:-((wholeHeight*rightLength)-wholeHeight)}); 

     var leftHeight = jQuery('.left').height(); 
     var leftLength = jQuery('.onLeft').length; 
     var tot = (leftHeight * leftLength) - leftHeight; 
     console.log('tot', tot) 
     $('body').bind('mousewheel', function(e){ 
      var height = jQuery('.left').height(); 
      var leftTop = jQuery('.left').position().top; 
      var rightTop = jQuery('.right').position().top; 
      if(e.originalEvent.wheelDelta /120 > 0) { 
       if (leftTop != 0) { 
        console.log('scrolling up !'); 
        jQuery('.left').animate({top:leftTop + height}); 
        jQuery('.right').animate({top:rightTop - height}); 
       } else { 
        console.log('The up end'); 
       } 
      } else { 
       if (leftTop != -tot) { 
        console.log('scrolling down !'); 
        jQuery('.left').animate({top:leftTop - height}); 
        jQuery('.right').animate({top:rightTop + height}); 
       } else { 
        console.log('the down end') 
       } 
      } 
     }); 
    }); 

https://jsfiddle.net/11pftj26/

感謝

Answer 1

試試這個：

$(document).ready(function(){ 
     var wholeHeight = jQuery('.right').height(); 
     var rightLength = jQuery('.onRight').length; 
     jQuery('.right').css({top:-((wholeHeight*rightLength)-wholeHeight)});scrolling=false; 
     var leftHeight = jQuery('.left').height(); 
     var leftLength = jQuery('.onLeft').length; 
     var tot = (leftHeight * leftLength) - leftHeight; 
     console.log('tot', tot) 
     $('body').bind('mousewheel', function(e){ 
    if(scrolling) 
     return; 
     scrolling=true; 
      var height = jQuery('.left').height(); 
      var leftTop = jQuery('.left').position().top; 
      var rightTop = jQuery('.right').position().top; 
      if(e.originalEvent.wheelDelta /120 > 0) { 
       if (leftTop != 0) { 
        console.log('scrolling up !'); 
        jQuery('.left').animate({top:leftTop + height},{done:function(){scrolling=false}}); 
        jQuery('.right').animate({top:rightTop - height},{done:function(){scrolling=false}}); 
       } else { 
        console.log('The up end'); 
      scrolling=false; 
       } 
      } else { 
       if (leftTop != -tot) { 
        console.log('scrolling down !'); 
        jQuery('.left').animate({top:leftTop - height},{done:function(){scrolling=false}}); 
        jQuery('.right').animate({top:rightTop + height},{done:function(){scrolling=false}}); 
       } else { 
        console.log('the down end'); 
     scrolling=false; 
       } 
      } 

     }); 
    }); 

Fiddle in Action

Answer 2

你可以使用函數的jquery，閱讀官方指南。

http://api.jquery.com/one/

Answer 3

滾動時快速按兩下您的leftTop和leftRight計算將被關閉。你可以做的是單獨從DOM狀態頂部計算：

https://jsfiddle.net/11pftj26/2/

$(document).ready(function(){ 
    var wholeHeight = jQuery('.right').height(); 
    var rightLength = jQuery('.onRight').length; 
    jQuery('.right').css({top:-((wholeHeight*rightLength)-wholeHeight)}); 

    var leftHeight = jQuery('.left').height(); 
    var leftLength = jQuery('.onLeft').length; 
    var tot = (leftHeight * leftLength) - leftHeight; 

    var index = 0; 

    function animate(index) { 
     jQuery('.left').stop().animate({top: -1 * index * leftHeight}); 
     jQuery('.right').stop().animate({top: -1 * (rightLength - index - 1) * wholeHeight }); 
    } 

    $('body').bind('mousewheel', function(e) { 

     if (e.originalEvent.wheelDelta > 0) { 
      index = Math.max(0, index - 1); 
     } else { 
      index = Math.min(index + 1, rightLength - 1); 
     } 

     animate(index); 
    }); 
});