Javascript 如何禁用多个滚动功能？

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

如果用户只滚动一次（使用鼠标滚轮），当您滚动多次（在功能完成之前，左侧和右侧将继续滚动并弄乱）。有没有办法禁用多个滚动

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

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

$（文档）.ready（函数（）{
var wholeHeight=jQuery（'.right'）.height（）；
var rightLength=jQuery（'.onRight'）.length；
jQuery（'.right'）.css（{top:-（（wholehight*rightength）-wholehight）}）；
var leftHeight=jQuery（'.left'）.height（）；
var leftLength=jQuery（'.onLeft'）.length；
var tot=（leftHeight*leftLength）-leftHeight；
console.log（'tot'，tot）
$（'body'）.bind（'mouseweell'，函数（e）{
var height=jQuery（'.left'）.height（）；
var leftTop=jQuery（'.left'）.position（）.top；
var rightop=jQuery（'.right'）.position（）.top；
如果（例如原始事件车轮增量/120>0）{
if（leftTop！=0）{
log（'向上滚动！'）；
jQuery（'.left'）.animate（{top:leftTop+height}）；
jQuery（'.right'）.animate（{top:rightTop-height}）；
}否则{
console.log（“上行端”）；
}
}否则{
如果（左上！=-tot）{
log（'向下滚动！'）；
jQuery（'.left'）.animate（{top:leftTop-height}）；
jQuery（'.right'）.animate（{top:rightop+height}）；
}否则{
console.log（“低端”）
}
}
});
});

谢谢

您可以使用Jquery的

.one（）

功能，请阅读官方指南

试试这个：

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

        });
    });

---

当您快速滚动两次时，

leftTop

和

leftRight

的计算将关闭。您可以做的是将顶部计算与DOM状态分开：

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