主页 / 问题 / 1334224
Accepted
E1mir
Asked:2022-10-02 01:17:29 +0000 UTC2022-10-02 01:17:29 +0000 UTC

如何实现从左到右滚动不与鼠标滚轮冲突

  • 772

网站上有一个元素，这个块应该在页面加载后自动水平滚动。

在此处输入图像描述

我做了它并写了以下内容：

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);

但是这里出现了一个问题，当加载这段代码时，一切正常，但不幸的是，在使用这种方法时，使用鼠标滚轮滚动时会出现问题。当动画进行时，在chrome浏览器中是不可能用鼠标滚轮滚动的，但是在firefox中，这是不可能的。谁遇到了这个问题，也许你有其他方法可以解决这个问题。

PS：容器样式如下：

.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;
}
javascript

1 个回答

  1. Best Answer

    一般来说，我通过改变translateXcss而不是滚动来解决这个问题。就我而言，它看起来像这样：

    更新了它的容器：

    .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);
}
    • 0

相关问题