Анимация прокрутки страницы jQuery

Я пытаюсь создать функцию прокрутки страниц на своем веб-сайте с помощью jQuery. Все работает, за исключением того, что я хочу, чтобы он принимал первое событие прокрутки и блокировал любые другие события прокрутки, пока анимация не завершится (700 мс), прежде чем принять новое событие прокрутки.

Я попытался установить тайм-аут, но это приостановило процесс, а затем продолжило после тайм-аута, а не блокировало любой ввод из события прокрутки.

<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 class = "scrollbit" style = "transition: all; transition-duration: 700ms;">
            <div data-id = "0" class = "active" 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>

javascript jquery

16.03.2022 20:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать переменную boolean, чтобы заблокировать прокрутку, пока функция animate не станет 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 class = "scrollbit" style = "transition: all; transition-duration: 700ms;">
            <div data-id = "0" class = "active" 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>

16.03.2022 21:03

Другие вопросы по теме

Я использую Javascript для автоматического добавления дефисов к номеру телефона. Необходимо изменить это, чтобы автоматически удалять дефисы, или найти новое исправление

Автоматическая перестановка карточек .show (в портфолио) jQuery CSS html

Ссылки href в объекте массива

JQUERY динамически созданная таблица. Попытка скрыть весь столбец

Заменить текст som в URL-адресе src на нескольких изображениях

Получить содержимое тега с помощью cheerio?

Проблемы с проверкой в динамических формах с страницами jquery + razor

.each(function()) не зацикливается при загрузке страницы, но обновляется с помощью специальной кнопки

Почему сортировка массива не работает должным образом?

Добавить сумму двух входных значений автоматически, не нажимая ни одной кнопки

Анимация прокрутки страницы jQuery

Ответы 1

Другие вопросы по теме

Похожие вопросы