Горизонтальная прокрутка с помощью колеса мыши в JavaScript

Нативная горизонтальная прокрутка с помощью колеса мыши не так тривиальна для пользователя. Однако это поведение можно изменить с помощью прослушивания событий (event listener).

Существует несколько событий, связанных с прокруткой и колесом мыши, например, mousewheel и DOMMouseScroll. В примере ниже я буду использовать событие для колеса мыши.

Итак, чтобы реализовать это поведение, код JavaScript будет выглядеть следующим образом:

element.addEventListener('wheel', (event) => {
  event.preventDefault();

  element.scrollBy({
    left: event.deltaY < 0 ? -30 : 30,
  });
});

Где element — это HTML-элемент, в котором пользователь будет прокручивать содержимое.

Вы можете спросить, почему left имеет статические значения. Это потому, что разные браузеры предоставляют разные значения для event.deltaY. Поэтому лучше поставить только одно значение, меняющееся только при прокрутке элемента в ту или иную сторону.

Результат:

Еще один вариант, который посоветовали пользователи в комментариях:

// Only works if scroll was _started inside the element_.

function force_scroll_sideways(element) {
  element.addEventListener("wheel", (event) => {
    event.preventDefault();

    let [x, y] = [event.deltaX, event.deltaY];
    let magnitude;

    if (x === 0) {
      magnitude = y > 0 ? -30 : 30;
    } else {
      magnitude = x;
    }

    //console.log({ x, y, magnitude });
    element.scrollBy({
      left: magnitude
    });
  });
}

Здесь смысл в том, чтобы сделать прокрутку вбок менее неудобной для людей с мышью, не мешая людям, использующим трекпад.

Проблема этого решения заключается в том, что если пользователь действительно прокручивает страницу влево или вправо, содержимое всегда будет прокручиваться вправо (event.deltaY будет равен 0).

Сергей Ермилов