Mobile Swipe: Hangs when moving your finger on the screen quickly

Question

Hello, I’m studying Touch Events and making an example of a page with full sections that passes one by one on the screen.

I did the CSS, HTML and Script, the basic works... But when I test on the phone, if you move your finger up/down quickly it gives a latch and makes the scroll.

Follows the code:

$(function () {
        // Touch Events
        window.addEventListener("touchstart", handleStart, false);
        window.addEventListener("touchmove", handleMove, false);
        window.addEventListener("touchcancel", handleCancel, false);
        window.addEventListener("touchend", handleEnd, false);
        var posIniY = 0;
        var posFimY = 0;
        var changePage = false;
        function handleStart(evt) {
            console.log('Start');
            posIniY = evt.touches[0].screenY;
            changePage = false;
        }
        function handleMove(evt) {
            console.log('Move');
            posFimY = evt.touches[0].screenY;
            changePage = true;
        }
        function handleEnd() {
            console.log('End');
            var scrollActive = $('#navegacao').find('.scroll.active').parent();
            if( changePage ) {
                var difY = (posIniY - posFimY);
                if( difY > 50 ) {
                    // Move para baixo
                    scrollActive.next('.nav-item').find('.scroll').click();
                    changePage = false;
                } else if( difY < -50 ) {
                    // Move para cima
                    scrollActive.prev('.nav-item').find('.scroll').click();
                    changePage = false;
                } else {
                    scrollActive.find('.scroll').click();
                    return false;
                }
            }
            changePage = false;
        }
        function handleCancel() {
            console.log('Cancel');
            changePage = false;
        }

        // Navegação vertical
        var scrollLinkY = $('.scroll');
        scrollLinkY.eq(0).click().addClass('active');

        // Scroll suave
        scrollLinkY.click(function (e) {
            console.log('scroll suave');
            var $this = $(this);
            if ($this.hasClass('scroll')) {
                e.preventDefault();
                $('body,html').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            }
            if (!$this.hasClass('active')) {
                scrollLinkY.removeClass('active');
                $this.addClass('active');
            }
        });

        // Usa as teclas
        window.addEventListener("keydown", function (e) {
            var itemActive = $('#navegacao').find('.scroll.active').parent();
            $('.scroll.d-md-none').remove();
            switch (e.key) {
                case 'ArrowUp':
                    itemActive.prev('.nav-item').find('.scroll').click();
                    break;
                case 'ArrowDown':
                    itemActive.next('.nav-item').find('.scroll').click();
                    break;
                case 'Home':
                    scrollLinkY.eq(0).click();
                    break;
                case 'End':
                    scrollLinkY.eq(-1).click();
                    break;
            }
        }, true);

        // Animações no scroll
        var secoes = $('section'),
            classAnima = 'animated';
        function animeOnScroll() {
            setTimeout(function () {
                var disTop = $(document).scrollTop() + 200;
                secoes.each(function () {
                    var itemTop = $(this).offset().top;
                    if (disTop >= itemTop) {
                        $(this).addClass(classAnima);
                    }
                });
            }, 1000);
        }
        animeOnScroll();
    });

@import url('https://fonts.googleapis.com/css?family=Roboto');

        * {
            margin: 0;
            padding: 0;
            border: 0 none;
            outline: 0 none;
        }
        body {
            font: 16px 'Roboto', sans-serif;
        }
        section {
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }

        section h3 {
            color: #fff;
            font-size: 42px;
        }

        .blue {
            background-color: #0d527d;
        }
        .purple {
            background-color: #8c4267;
        }
        .wine {
            background-color: #4b0000;
        }
        .red {
            background-color: #a61615;
        }
        .orange {
            background-color: #f54b06;
        }
        .green {
            background-color: #308c4a;
        }

        /* Menu lateral seções */
        #navegacao {
            position: fixed;
            top: 50%;
            right: 40px;
            padding: 0;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
            z-index: 10;
        }
        #navegacao .nav-item {
            margin: 6px 0;
            list-style: none;
        }
        #navegacao .nav-item .nav-link {
            display: block;
            padding: 0;
            background-color: transparent;
        }
        #navegacao .nav-item .nav-link::before {
            content: '';
            display: block;
            width: 7px;
            height: 7px;
            background-color: #fff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            opacity: .15;
        }
        #navegacao .nav-item .nav-link:hover::before,
        #navegacao .nav-item .nav-link.active::before {
            opacity: 1;
        }
        #navegacao .nav-item .nav-link span {
            position: absolute;
            top: -3px;
            width: 150px;
            color: rgba(255,255,255,1);
            text-align: right;
            pointer-events: none;
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
        #navegacao .nav-item .nav-link:hover span {
            animation: fadeInLeft .8s cubic-bezier(.5,.9,.1,.9);
            animation-fill-mode: forwards;
        }

<nav id="navegacao" class="navbar d-none d-md-block">
    <ul class="nav nav-pills flex-column">
        <li class="nav-item"><a class="nav-link scroll" href="#secao01"><span>Seção 01</span></a></li>
        <li class="nav-item"><a class="nav-link scroll" href="#secao02"><span>Seção 02</span></a></li>
        <li class="nav-item"><a class="nav-link scroll" href="#secao03"><span>Seção 03</span></a></li>
        <li class="nav-item"><a class="nav-link scroll" href="#secao04"><span>Seção 04</span></a></li>
        <li class="nav-item"><a class="nav-link scroll" href="#secao05"><span>Seção 05</span></a></li>
        <li class="nav-item"><a class="nav-link scroll" href="#secao06"><span>Seção 06</span></a></li>
    </ul>
</nav>
<section id="secao01" class="blue"><h3>Seção 01</h3></section>
<section id="secao02" class="purple"><h3>Seção 02</h3></section>
<section id="secao03" class="wine"><h3>Seção 03</h3></section>
<section id="secao04" class="red"><h3>Seção 04</h3></section>
<section id="secao05" class="orange"><h3>Seção 05</h3></section>
<section id="secao06" class="green"><h3>Seção 06</h3></section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

The page scroll is messing up your script. Just disable it via CSS:

html, body{
    overflow: hidden;
}

hope I’ve helped ;)

Answer 2

Try to decrease the time of the Animate or remove them.

$('body,html').animate(...,1000);

When vc moves up or down you set 1000 milliseconds (1 second) to finish the action, by moving up and down quickly you are creating multiple asynchronous calls:

• To top +1000ms
• Down to +1000ms
• To top +1000ms
• Down to +1000ms

Possibly causing your browser to expect to resolve the calls to take the action of the last active, giving the impression of locking.