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

Ссылка скопирована
JavaScript
1 ответ

Здравствуйте, мне нужно сделать так, чтобы если мышка была на блоке 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;         });     } }

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; }); } }

Дополнительно:

Ответы:

Там всё проще:

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

<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                 }             }         }

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 } } }

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

  • скроллишь окно в предыдущее положение

    на слабом устройстве будет скакать

  • imko, если ты о смартфонах, то на тачскрины этот подход и не распространяется. Вопрос то про скролл был, а не про свайп.
  • Евгений, да и компы не все хорошо такое переваривают
  • imko, я написал то, но ничего не работает и консоль чиста 
    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 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                 }             }         }

    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 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 } } }

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Дмитрий К. Ответ

Для того чтобы предотвратить скроллинг при наведении на блок, можно использовать CSS свойство `overflow` с значением `hidden`. Это позволит скрыть содержимое блока, которое выходит за его границы, и предотвратит скроллинг.

Пример использования:

.block {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.block { width: 200px; height: 200px; overflow: hidden; }

В данном примере блок будет иметь размеры 200 пикселей по ширине и высоте, и при этом все содержимое, которое выходит за его границы, будет скрыто. Таким образом, при наведении на блок, скроллинг не будет происходить.

Если вы хотите применить это свойство к определенному блоку при наведении на него, то можно использовать псевдокласс `:hover`:

.block:hover {
  overflow: hidden;
}

.block:hover { overflow: hidden; }

Теперь при наведении на блок, скроллинг будет предотвращен. Надеюсь, это поможет вам решить вашу проблему!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 0 ответов