Блог

Проблема

У меня есть элемент, который можно прокручивать горизонтально (с overflow-x: scroll; помощью ). Если я наведу на него курсор мыши и использую колесо мыши (вертикально), это не приведет к каким — либо действиям, потому что прокручиваемый элемент захватывает колесо мыши.

Я хочу, чтобы прокрутка с помощью колесика мыши на этом элементе вместо этого прокручивала окно вверх / вниз, как это было бы, если бы элемент не был прокручиваемым.

Рассмотренные решения

Я попытался использовать wheel событие и запретить по умолчанию, если прокрутка вертикальная, но это ничего не дает.

Я также рассматривал возможность захвата deltaY scroll события и его использования для прокрутки окна вручную window.scrollTo() , однако я боюсь, что каждый браузер / ОС может иметь различную реализацию прокрутки, что затрудняет надежное дублирование поведения на всех платформах.

Реализация поведения прокрутки вручную с помощью некоторой библиотеки прокрутки вместо ретрансляции в браузере — это последнее средство.

Вопрос

Есть ли способ каким-то образом распространить это событие колеса на родителя (окно)?

Вам просто нужно сказать элементу, чтобы он не слушал вертикальную прокрутку. По умолчанию это свойство visible , за одним исключением:

Установка одной оси на видимую (по умолчанию), в то время как установка другой на другое значение приводит к тому, что видимая ведет себя как автоматическая. (Веб-сайты MDN)

Это означает, что вам нужно явно настроить, overflow-y: hidden чтобы получить желаемое поведение.

 body{
  height: 1000px;
}
#outer{
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
}
#hscroll{
  width: 500px;
  height: 500px;
 } 

 <div id="outer"><div id='hscroll'><p>Scrollme</p></div></div>