Блог

Главная - Вопросы по программированию - Отключите прокрутку при наведении курсора на контейнер

Отключите прокрутку при наведении курсора на контейнер

#javascript

Вопрос:

Итак, я пытаюсь отключить событие прокрутки, когда пользователь наводит курсор на контейнер, в SO есть некоторые решения, но они используют jQuery, и ни одно из них, похоже, не работает, или это не то решение, которое я ищу. Я не хочу отключать полосу прокрутки, так как это может привести к плохому взаимодействию с пользователем (полоса прокрутки приводит к увеличению/уменьшению ширины контейнеров). Есть ли какой-либо способ добиться этого с помощью js? Например,

 <body>
<div onScroll={()=> }>Container</div>
Content here
</body>

Ответ №1:

это ?

 const scroll_stopper = document.querySelector('#StopSrollonHover')

scroll_stopper.onmouseover = () =>
  {
  document.body.classList.add('noScroll')
  }
scroll_stopper.onmouseout = () =>
  {
  document.body.classList.remove('noScroll')
  } 
 .noScroll {
  overflow: hidden !important;
}
body {
  height: 200vh;
}
#StopSrollonHover {
  display    : block;
  margin-top : 25vh;
  height     : 100px;
  background :  yellow;
} 
   <div id="StopSrollonHover">  </div>

Комментарии:

1. Я действительно ищу способ добиться этого с помощью JS, мне не очень нравится решение с помощью CSS

2. @User123123 Почему ? у каждой части есть роль, которая дополняет другую. Тело HTML создано для представления полезного контента, javascript создан для добавления взаимодействия, а css создан для обработки презентации. Это представляет собой форму зрелости в проектировании систем. Вы бы хотели, чтобы мы вернулись в те дни, когда все было перепутано?

Метки: