Задать вопрос
@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;
        });
    }
}
  • Вопрос задан
  • 69 просмотров
Комментировать
Подписаться 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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать игру "Змейка" с помощью библиотеки Pygame на ООП
01 мая 2024, в 17:05
2000 руб./за проект
Гейм дизайнер
01 мая 2024, в 16:45
120000 руб./за проект
Дизайн для IOS утилиты по техническому заданию
01 мая 2024, в 15:48
18000 руб./за проект
Ещё заказы