Как реализовать скроллинг слева направо чтобы не было конфликта с колесиком мыши

Question

Есть элемент на веб-сайте, данный блок должен автоматически скроллиться горизонтально после подгрузки страницы.

Я его сверстал, написал следющее:

scrolling = setInterval(() => {
  let scrolled = targetElement.scrollLeft;
  targetElement.scrollTo(targetElement.scrollLeft + 1, 0);
  // scrolled to the end, start again
  if (scrolled === targetElement.scrollLeft) {
      targetElement.scrollLeft = 0;
  }
}, 10);

Но тут возникает проблема, когда подгружается данный код всё работает но к сожалению при использовании данного метода возникает проблема при скроллине колесиком мыши. Когда идет анимация, в браузере хрома невозможно скроллить с помощью колесика мыши, а в фаерфоксе например такого нет. Кто сталкивался с этой проблемой, и быть может у вас есть какой-нибудь другой способ решения данной проблемы.

P.S: Стили контейнера следующие:

.providers {
  display: grid;
  overflow-x: scroll;
  grid-template-columns: max-content;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 200px !important;
  grid-auto-flow: column;
  grid-gap: 20px;
  margin-top: 76px;
}

Answer 1

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

Обновил его контейнер:

.providers {
  &__wrapper {
    display: grid;
    grid-template-columns: max-content;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 200px !important;
    grid-auto-flow: column;
    grid-gap: 20px;

    @media (max-width: 992px) {
      grid-template-rows: repeat(3, 1fr);
      grid-gap: 14px;
    }

    @media (max-width: 562px) {
      grid-template-rows: repeat(6, 1fr);
    }
  }
}

А вот и сама функция анимации:

function startScrollAnimation(targetElement) {
    const wrapper = $(targetElement);
    const elements = wrapper.find('> div');
    const elementWidth = elements.width();
    let x = 0;
    let gap = 20;
    let rows = 2;
    const width = window.innerWidth
    
    if (width < 992) {
        rows = 3
        gap = 14
    }

    if (width < 562) {
        rows = 6
    }

    // высчитываем количество столбцов
    const columns = Math.floor(elements.length / rows) + (elements.length % rows === 0 ? 0 : 1)
    // высчитываем полную ширину контейнера с элементами
    const fullWidth = columns * (gap * 2 + elementWidth) - (wrapper.width() - (elementWidth - gap * 2));

    let reverse = false
    // анимируем, если доходит до конца блока то анимация начинает идти в обратную сторону
    setInterval(() => {
        if (!reverse && Math.abs(x) >= fullWidth) {
            reverse = true
        } else if (reverse && Math.abs(x) <= 0) {
            reverse = false
        }
        reverse ? x++ : x--;
        wrapper.css({'transform': `translateX(${ x }px)`})
    }, 10);
}

БЛОГ НА HUSL

Как реализовать скроллинг слева направо чтобы не было конфликта с колесиком мыши

Ответы (1 шт):