Как можно реализовать горизонтальную прокрутку DIVа колёсиком мыши при наведении на него?
Может есть конкретное решение (готовый код)?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКолесико мышки и прочие устройства-указатели могут генерировать события как вертикальной прокрутки, так и горизонтальной. Нижеприведённый сценарий на JavaScript подменяет вертикальную прокрутку на горизонтальную, игнорируя настройки последней. То есть элемент всегда прокручивается вбок настолько же, насколько он бы прокрутился по вертикали. Вертикальная прокрутка будет отключена, поэтому желательно, чтобы содержимое блока помещалось бы в своих границах.
document.getElementById("horizontal-scroller")
.addEventListener('wheel', function(event) {
if (event.deltaMode == event.DOM_DELTA_PIXEL) {
var modifier = 1;
// иные режимы возможны в Firefox
} else if (event.deltaMode == event.DOM_DELTA_LINE) {
var modifier = parseInt(getComputedStyle(this).lineHeight);
} else if (event.deltaMode == event.DOM_DELTA_PAGE) {
var modifier = this.clientHeight;
}
if (event.deltaY != 0) {
// замена вертикальной прокрутки горизонтальной
this.scrollLeft += modifier * event.deltaY;
event.preventDefault();
}
});
<pre id="horizontal-scroller" style="overflow:auto">
йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен
йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен
йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен йцукен
</pre>