Задать вопрос
@thesirvlad
javascript

Как сделать чтобы при наведении на блок не скроллило?

Здравствуйте, мне нужно сделать так, чтобы если мышка была на блоке swiper, тогда параметр navigation был false, я вроде бы написал, но код не работает почему-то
if (document.querySelector('#fullpage')) {
    if (window.innerWidth >= 993) {
        let isNavigationEnabled = true; // Флаг для отслеживания состояния автопрокрутки

        const fullPageInstance = new fullpage('#fullpage', {
            navigation: isNavigationEnabled,
            navigationPosition: 'left',
            scrollHorizontally: true,
            onLeave: function(origin, destination, direction, trigger) {
                var origin = this;
                const el = document.querySelector('.header__column-location');
                el.classList.remove("view");
                if (origin.index == 0 && direction =='down') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                } else if (origin.index == 2 && direction == 'down') {
                    document.querySelector('#fp-nav.fp-left').classList.remove('scroll');
                } else if (origin.index == 3 && direction == 'down') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                } else if (origin.index == 6 && direction == 'down') {
                    document.querySelector('#fp-nav.fp-left').classList.remove('scroll');
                } else if (origin.index == 7 && direction == 'up') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                } else if (origin.index == 4 && direction == 'up') {
                    document.querySelector('#fp-nav.fp-left').classList.remove('scroll');
                } else if (origin.index == 3 && direction == 'up') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                } else if (origin.index == 1 && direction == 'up') {
                    document.querySelector('#fp-nav.fp-left').classList.remove('scroll');
                };
            },
        });

        const elementOne = document.querySelector('.swiper');

        elementOne.addEventListener('mouseenter', () => {
            isNavigationEnabled = false;
            fullPageInstance.navigation = isNavigationEnabled;
        });

        elementOne.addEventListener('mouseleave', () => {
            isNavigationEnabled = true;
            fullPageInstance.navigation = isNavigationEnabled;
        });
    }
}
  • Вопрос задан
  • 72 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
muscimolus
@muscimolus
Там всё проще:

<body style="height: 200vh;">
    <div class="swiper" style="width: 50vw; height: 50vh; margin: auto; background-color: black;"></div>
</body>

const swiper = document.querySelector('.swiper')
        if(swiper){
            swiper.onmouseenter = () => {
                const X = window.scrollX
                const Y = window.scrollY
                window.onscroll = () => {
                    window.scrollTo(X, Y)
                }
                swiper.onmouseleave = () => {
                    window.onscroll = () => null
                }
            }
        }


А прокрутку окна как таковую - отменить вообще нельзя, поэтому просто скроллишь окно в предыдущее положение.
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать проект Площадки для дизайнеров интерьеров
22 нояб. 2024, в 10:19
10000 руб./за проект
Сделать верстку двух страниц из фигмы
22 нояб. 2024, в 09:58
5000 руб./за проект
Доделать проект
22 нояб. 2024, в 09:57
3000 руб./за проект
Ещё заказы