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

Question

DarkMatter

javascript

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

Как я могу настроить параметр `navigation` в `false` для блока swiper, когда курсор мыши находится на нем? У меня есть код, который должен это сделать, но что-то не работает. Вот фрагмент кода: <br/> <pre><code>if (document.querySelector('#fullpage')) {
    if (window.innerWidth &gt;= 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 &amp;&amp; direction =='down') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                } else if (origin.index == 2 &amp;&amp; direction == 'down') {
                    document.querySelector('#fp-nav.fp-left').classList.remove('scroll');
                } else if (origin.index == 3 &amp;&amp; direction == 'down') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                } else if (origin.index == 6 &amp;&amp; direction == 'down') {
                    document.querySelector('#fp-nav.fp-left').classList.remove('scroll');
                } else if (origin.index == 7 &amp;&amp; direction == 'up') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                } else if (origin.index == 4 &amp;&amp; direction == 'up') {
                    document.

3 апреля 2024 г. 11:29

Ответы на вопрос 2

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

Answer 1

querySelector('#fp-nav.fp-left').classList.remove('scroll');
                } else if (origin.index == 1 &amp;&amp; direction == 'up') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                } else if (origin.index == 5 &amp;&amp; direction == 'up') {
                    document.querySelector('#fp-nav.fp-left').classList.remove('scroll');
                } else if (origin.index == 8 &amp;&amp; direction == 'up') {
                    document.querySelector('#fp-nav.fp-left').classList.add('scroll');
                }
            }
        });

        // Убираем навигацию при наведении на блок
        document.querySelector('#fullpage').addEventListener('mouseover', function() {
            fullPageInstance.setAllowScrolling(false);
            isNavigationEnabled = false;
        });

        // Возвращаем навигацию после того как убрали курсор с блока
        document.querySelector('#fullpage').addEventListener('mouseout', function() {
            fullPageInstance.setAllowScrolling(true);
            isNavigationEnabled = true;
        });
    }
}</code></pre>

Answer 2

Там всё проще: 
 
 <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
                }
            }
        }
 
 
 А прокрутку окна как таковую - отменить вообще нельзя, поэтому просто скроллишь окно в предыдущее положение.