#javascript #html #css #events #scroll
Вопрос:
Проблема
У меня есть элемент, который можно прокручивать горизонтально (с overflow-x: scroll;
помощью ). Если я наведу на него курсор мыши и использую колесо мыши (вертикально), это не приведет к каким — либо действиям, потому что прокручиваемый элемент захватывает колесо мыши.
Я хочу, чтобы прокрутка с помощью колесика мыши на этом элементе вместо этого прокручивала окно вверх / вниз, как это было бы, если бы элемент не был прокручиваемым.
Рассмотренные решения
Я попытался использовать wheel
событие и запретить по умолчанию, если прокрутка вертикальная, но это ничего не дает.
Я также рассматривал возможность захвата deltaY
scroll
события и его использования для прокрутки окна вручную window.scrollTo()
, однако я боюсь, что каждый браузер / ОС может иметь различную реализацию прокрутки, что затрудняет надежное дублирование поведения на всех платформах.
Реализация поведения прокрутки вручную с помощью некоторой библиотеки прокрутки вместо ретрансляции в браузере — это последнее средство.
Вопрос
Есть ли способ каким-то образом распространить это событие колеса на родителя (окно)?
Ответ №1:
Вам просто нужно сказать элементу, чтобы он не слушал вертикальную прокрутку. По умолчанию это свойство 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>