主页 / 问题 / 1597316
Accepted
Daniel Batura
Asked:2024-10-21 01:11:20 +0000 UTC2024-10-21 01:11:20 +0000 UTC

将鼠标悬停在内容上的轮播[关闭]

  • 772

其中有块的部分，当它们悬停在该部分的左侧时，应该滚动到左侧，相应地，也应该滚动到右侧。

我在网上搜索了很多，找不到解决这个问题的方法。我会自己用js写，但我不太擅长:(

javascript

2 个回答

  1. Best Answer

    const scrollContainer = document.querySelector('.scroll-container');
let scrollSpeed = 0;
let scrollInterval;

scrollContainer.addEventListener('mousemove', (e) => {
  const containerWidth = scrollContainer.offsetWidth;
  const mouseX = e.clientX - scrollContainer.getBoundingClientRect().left;
  const scrollLeftMax = scrollContainer.scrollWidth - containerWidth;

  // Наведение на левый край 20%
  if (mouseX < containerWidth * 0.2) {
    scrollSpeed = -5; // Скорость прокрутки влево
  }
  // Наведение на правый край 20%
  else if (mouseX > containerWidth * 0.8) {
    scrollSpeed = 5; // Скорость прокрутки вправо
  }
  // Остановка прокрутки в центре
  else {
    scrollSpeed = 0;
  }
});

scrollContainer.addEventListener('mouseleave', () => {
  scrollSpeed = 0;
});

scrollInterval = setInterval(() => {
  if (scrollSpeed !== 0) {
    scrollContainer.scrollLeft += scrollSpeed;
  }
}, 16);
    .scroll-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  display: flex;
  transition: transform 0.3s ease;
  white-space: nowrap;
  width: fit-content;
}

.block {
  width: 300px;
  margin: 0 10px;
  background-color: #ccc;
  text-align: center;
  line-height: 150px;
  height: 150px;
  display: inline-block;
}
    <div class="scroll-container">
  <div class="scroll-content">
    <div class="block">Блок 1</div>
    <div class="block">Блок 2</div>
    <div class="block">Блок 3</div>
    <div class="block">Блок 4</div>
    <div class="block">Блок 5</div>
    <div class="block">Блок 6</div>
    <div class="block">Блок 7</div>
    <div class="block">Блок 8</div>
  </div>
</div>

    • 2

  2. 我决定实现它纯粹是为了兴趣，但我认为 GPT 也能胜任这项任务。
    我不太擅长解释代码，但我用注释标记了一些东西。

    我认为我的解决方案并不理想。

    class AutoScroller
{
    HOVER_CURSOR_ZONE = 100; // Размер зоны для наведения по краям
    SCROLL_DISTANCE = 100; // Расстояние, на которое прокручивает
    SCROLL_SPEED = 100; // Количество мс между автоматическим скролом

    #scrollTimerId;
    #wrapper;

    constructor(wrapperSelector)
    {
        this.#wrapper = document.querySelector(wrapperSelector);

        this.#init();
    }

    #init()
    {
        if (this.#wrapper === null)
        {
            console.error("Wrapper not found");
            return;
        }

        this.#wrapper.addEventListener("mouseleave", () => this.#stopScrolling());
        this.#wrapper.addEventListener("mousemove", (event) => this.#handleMouseMove(event));
    }

    #handleMouseMove(event)
    {
        const { clientWidth } = this.#wrapper;
        let direction = 0; // -1 - left | 0 - none | 1 - right

        // Проверяем, попадает ли курсор в зону наведения
        if (event.clientX >= clientWidth - this.HOVER_CURSOR_ZONE)
        {
            direction = 1; // Двигаем вправо
        }
        else if (event.clientX <= this.HOVER_CURSOR_ZONE)
        {
            direction = -1; // Двигаем влево
        }

        if (this.#scrollTimerId)
        {
            this.#stopScrolling();
        }

        if (direction !== 0)
        {
            this.#scrollingBlock(direction);
            this.#scrollTimerId = setInterval(() => this.#scrollingBlock(direction), this.SCROLL_SPEED);
        }
    }

    #scrollingBlock(direction)
    {
        if (!this.#wrapper)
        {
            return;
        }

        this.#wrapper.scrollTo({
            left: this.#wrapper.scrollLeft + (this.SCROLL_DISTANCE * direction),
            behavior: "smooth"
        });
    }

    #stopScrolling()
    {
        clearInterval(this.#scrollTimerId);
        this.#scrollTimerId = undefined;
    }
}

const autoScroller = new AutoScroller(".wrapper");
    .wrapper
{
    display: flex;
    gap: 8px;

    overflow-x: auto;

    div
    {
        width: 300px;
        height: 150px;

        flex-shrink: 0;

        background-color: #DC4242;
        border-radius: 16px;
    
    display: grid;
    place-content: center;
    
    color: #FFF;
    font-size: 3em;
    }
}

.wrapper::-webkit-scrollbar
{
    height: 0px !important;
}
    <div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
</div>

    • -1

相关问题