Geek Answers Handbook

How to disable more than one scroll function?

I am making a page where, when scrolling down, the left side of the page will slide up and the right side of the page will move down. and when scrolling up, the left side of the page will move down, and the right side of the page will move up.

It works for me if the user ONLY scrolls once (using the mouse wheel), when you scroll several times (before the function is completed, the left and right sides will continue to scroll and ruin. Disable more than one scroll?

I added my code and 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/

thank

+4
source share
3 answers

try the following:

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

        });
    });

+2

.one() JQuery, .

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

0

When you re-scroll twice, your calculations for leftTopand leftRightwill be disabled. What you can do is to separate 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);
    });
});
0
source

More articles:


All Articles