jQuery Page Scrolling Animation-CodePudding

I am trying to create a page scrolling feature on my website using jQuery. Everything works, except that I want it to accept the first scroll event and block any other scroll events until the animation has finished (700ms) before accepting a new scroll event.

I tried setting a timeout, but that paused the process and then continued after the timeout rather than blocking any input from the scroll event.

<section style="max-height: 101vh; min-height: 100vh; height:100%; overflow: hidden">
    <div id="container" data-scroll="0" style="height: 100vh; overflow-y:hidden;">
        <div  style="transition: all; transition-duration: 700ms;">
            <div data-id="0"  style="height: 100vh; background: red; transition-duration: 700ms;"></div>
            <div data-id="1" style="height: 100vh; background: green; transition-duration: 700ms;"></div>
            <div data-id="2" style="height: 100vh; background: yellow; transition-duration: 700ms;"></div>
            <div data-id="3" style="height: 100vh; background: blue; transition-duration: 700ms;"></div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>

<script>
    function doScroll(direction) {
        var active = $('.active').attr('data-id')
        active = Number(active)
        if (event.deltaY == -100) {
            if (active != 0) {
                active = Number(active) - Number(1);
                $('.scrollbit').animate({ textIndent: 0 }, {
                    step: function (now, fx) {
                        $(this).css('transform', 'translateY(-'   (Number(active) * 100)   'vh')
                    }, duration: 'slow',
                }, 'linear');
                $('.active').removeClass('active')
                $('[data-id="'   active   '"]').addClass('active')
            }
        }
        if (event.deltaY == 100) {
            var elem = '[data-id="'   (Number(active)   1)   '"]';
            if ($(elem).length != 0) {
                active = Number(active)   Number(1);

                $('.scrollbit').animate({ textIndent: 0 }, {
                    step: function (now, fx) {
                        $(this).css('transform', 'translateY(-'   (Number(active) * 100)   'vh')
                    }, duration: 'slow',
                }, 'linear');
                $('.active').removeClass('active')
                var target = '[data-id="'   active   '"]';
                $('[data-id="'   active   '"]').addClass('active')
            }
        }
    }

    window.addEventListener("wheel", event => doScroll(event));

</script>

<style>
    body {
        margin: 0;
    }
</style>

CodePudding user response：

You can use a boolean variable to block the scroll until the animate function is complete.

<section style="max-height: 101vh; min-height: 100vh; height:100%; overflow: hidden">
    <div id="container" data-scroll="0" style="height: 100vh; overflow-y:hidden;">
        <div  style="transition: all; transition-duration: 700ms;">
            <div data-id="0"  style="height: 100vh; background: red; transition-duration: 700ms;"></div>
            <div data-id="1" style="height: 100vh; background: green; transition-duration: 700ms;"></div>
            <div data-id="2" style="height: 100vh; background: yellow; transition-duration: 700ms;"></div>
            <div data-id="3" style="height: 100vh; background: blue; transition-duration: 700ms;"></div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>

<script>
    let stopScroll = false;

    function doScroll(direction) {
                
        if (stopScroll) return;
                
        var active = $('.active').attr('data-id')
        active = Number(active)
        if (event.deltaY == -100) {
            if (active != 0) {
                            
                stopScroll = true;
                        
                active = Number(active) - Number(1);
                $('.scrollbit').animate({ textIndent: 0 }, {
                    step: function (now, fx) {
                        $(this).css('transform', 'translateY(-'   (Number(active) * 100)   'vh')
                    }, 
                    complete: function() {
                        stopScroll = false;
                    },
                    duration: 'slow',
                }, 'linear');
                $('.active').removeClass('active')
                $('[data-id="'   active   '"]').addClass('active')
            }
        }
        if (event.deltaY == 100) {
            var elem = '[data-id="'   (Number(active)   1)   '"]';
            if ($(elem).length != 0) {
                        
                stopScroll = true;
                        
                active = Number(active)   Number(1);

                $('.scrollbit').animate({ textIndent: 0 }, {
                    step: function (now, fx) {
                        $(this).css('transform', 'translateY(-'   (Number(active) * 100)   'vh')
                    }, 
                    complete: function() {
                        stopScroll = false;
                    },
                    duration: 'slow',
                }, 'linear');
                $('.active').removeClass('active')
                var target = '[data-id="'   active   '"]';
                $('[data-id="'   active   '"]').addClass('active')
            }
        }
    }

    window.addEventListener("wheel", event => doScroll(event));

</script>

<style>
    body {
        margin: 0;
    }
</style>