How to disable more than one scroll function?

Question

I am making a page, where on scroll down, the left side of the page will slide up, and the right side of the page will slide down. and on scroll up, the left side of the page will slide down, and the right side of the page will slide up.

I have this working if the user ONLY scrolls once (using a mouse wheel), when you scroll multiple times (before the function has completed, the left and right side will continue to scroll and mess up. Is there a way to disable more than one scroll?

I have added my code and the fiddle below.

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

Thanks

Prasad · Accepted Answer · 2016-03-08 16:56:16Z

try this:

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

Claudio King · Accepted Answer · 2016-03-08 14:46:56Z

0

You can use .one() function of Jquery, read the official guide.

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

answered Mar 8, 2016 at 14:46

Claudio King

1,6161 gold badge11 silver badges12 bronze badges

Comments

Halcyon · Accepted Answer · 2016-03-08 15:01:23Z

When you scroll twice quickly your calculations for leftTop and leftRight will be off. What you can do is seperate the top calculation from the DOM state:

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

Collectives™ on Stack Overflow

How to disable more than one scroll function?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related