Задать вопрос
@historydev
Редактирую файлы с непонятными расширениями
javascript

Как инвертировать скролл по колесу мыши?

Нужно чтобы по колесу мыши скролл по X работал, а не по Y. Не могу понять как это гуглить, даже близко не выдаёт то, что мне нужно.

Поставил два тега т.к. не уверен что обязателен js для этого дела
  • Вопрос задан
  • 291 просмотр
1 комментарий
Подписаться 2 Простой 1 комментарий
Решения вопроса 2
s0lgryn
@s0lgryn
Попробуй так
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Горизонтальная прокрутка колесиком мыши</title>
  <style>
    /* .wrapper::-webkit-scrollbar {
        display: none;
    } */
    .wrapper {
      width: 100%;
      white-space: nowrap;
      overflow-x: auto;
    }

    .item {
      display: inline-block;
      width: 200px;
      height: 200px;
      margin-right: 10px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const wrapper = document.querySelector(".wrapper");
      wrapper.addEventListener("wheel", (event) => {
        if (event.deltaY !== 0) {
          wrapper.scrollLeft += event.deltaY;
          event.preventDefault();
        }
      });
    });
  </script>
</body>
</html>
Ответ написан
2 комментария
2 комментария
@historydev Автор вопроса, куратор тега JavaScript
Редактирую файлы с непонятными расширениями
Боль-мень плавный скроллинг:
targetElement.addEventListener("wheel", (event) => {
    //@ts-ignore
    if (event.deltaY !== 0) {
        //@ts-ignore
        targetElement.scrollLeft += (targetElement.scrollWidth/100) * Math.sign(event.deltaY);
        event.preventDefault();
    }
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
scoffs
@scoffs
Fullstack | C# | Student
Не это?
try {
 window.addEventListener("wheel", function(event) {
    if (event.deltaX !== 0) {
        event.preventDefault();
        window.scrollBy(event.deltaX, -event.deltaY);
    }
});
}
catch(e) {
  console.error(e);
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Парсер-бот
22 дек. 2024, в 20:12
10000 руб./за проект
Ещё заказы