Горизонтальная прокрутка может значительно улучшить взаимодействие с пользователем на веб-сайтах и ​​веб-приложениях с широким контентом или горизонтальным макетом. В этой статье мы рассмотрим несколько способов включения горизонтальной прокрутки страниц с помощью колеса мыши в JavaScript. Реализуя эти методы, разработчики могут предоставить пользователям плавный и интуитивно понятный способ горизонтальной навигации по их контенту. Давайте углубимся в примеры кода и посмотрим, как это делается!

Метод 1. Использование события Wheel

window.addEventListener("wheel", function (event) {
  event.preventDefault();
  var delta = event.deltaX || event.wheelDeltaX;
  var scrollContainer = document.getElementById("scroll-container");
  scrollContainer.scrollLeft += delta;
});

Метод 2. Использование события Wheel с пассивным значением: false

window.addEventListener(
  "wheel",
  function (event) {
    event.preventDefault();
    var delta = event.deltaX || event.wheelDeltaX;
    var scrollContainer = document.getElementById("scroll-container");
    scrollContainer.scrollLeft += delta;
  },
  { passive: false }
);

Метод 3. Обработка события «Колесо мыши»

window.onmousewheel = function (event) {
  event.preventDefault();
  var delta = event.wheelDeltaX || event.deltaX * -1;
  var scrollContainer = document.getElementById("scroll-container");
  scrollContainer.scrollLeft += delta;
};

Метод 4. Использование события Wheel с кросс-браузерной совместимостью

function handleMouseWheel(event) {
  event.preventDefault();
  var delta = event.deltaX || -event.wheelDeltaX || event.detail * 40;
  var scrollContainer = document.getElementById("scroll-container");
  scrollContainer.scrollLeft += delta;
}
if (window.addEventListener) {
  window.addEventListener("wheel", handleMouseWheel, { passive: false });
  window.addEventListener("mousewheel", handleMouseWheel, { passive: false });
  window.addEventListener("DOMMouseScroll", handleMouseWheel, { passive: false });
} else {
  window.attachEvent("onmousewheel", handleMouseWheel);
}

В этой статье мы рассмотрели несколько способов включения горизонтальной прокрутки страниц с помощью колеса мыши в JavaScript. Используя эти методы, разработчики могут обеспечить своим пользователям плавную горизонтальную прокрутку. Не забудьте учитывать кросс-браузерную совместимость и удобство использования при реализации этих методов на своем веб-сайте или веб-приложении. Поэкспериментируйте с этими примерами кода и выберите подход, который лучше всего соответствует вашим конкретным требованиям. Приятной прокрутки!