我正在制作一个页面,在向下滚动的同时,页面的左侧将向上滑动,页面的右侧将向下滑动.

向上滚动时,页面左侧将向下滑动,页面右侧将向上滑动.

我有这个工作如果用户只滚动一次(使用鼠标滚轮),当你滚动多次(在功能完成之前,左侧和右侧将继续滚动和搞乱.有没有办法禁用超过一卷？

我添加了我的代码和下面的小提琴.

<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/

谢谢

最佳答案 试试这个：

    $(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