如何禁用多个滚动功能？

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); 
    }); 
});