@historydev
Валера, настало твоё время

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

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

Поставил два тега т.к. не уверен что обязателен js для этого дела
  • Вопрос задан
  • 277 просмотров
Решения вопроса 2
Попробуй так
<!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>
Ответ написан
@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);
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы