鼠标滚轮横向滚动失效问题：多容器无法适配该功能

问题根源 #

• 重复ID冲突：HTML中多个容器使用了同一个id="container"，但ID在DOM文档中必须唯一，浏览器只会识别第一个匹配的元素，导致后续容器无法绑定滚动事件。
• 单一元素选择：document.querySelector("#container")仅返回第一个匹配的容器，未对其他容器做事件绑定。
• 不支持动态元素：现有代码仅在页面加载时绑定一次事件，后续动态创建的容器无法自动获得滚动功能。

修复方案 #

1. 替换ID为Class

将所有容器的id="container"改为class="horizontal-scroll-container"，确保样式和选择器可复用。

2. 更新CSS选择器

把CSS中的#container改为.horizontal-scroll-container，适配Class选择器。

3. 事件委托实现全局监听

通过监听父元素（如body）的滚轮事件，判断触发事件的目标是否在滚动容器内，这样无论现有还是未来动态创建的容器都能生效，无需重复绑定事件。

修改后的完整代码 #

<body>
  <style>
    .horizontal-scroll-container {
      display: flex;
      overflow-x: scroll;
      max-width: 100rem;
      margin: 0 auto;
    }

    .horizontal-scroll-container p {
      font-family: sans-serif;
      border-radius: 8px;
      background: #ff6961;
      color: black;
      padding: 2rem 3rem;
      margin: 2rem 1rem;
    }
  </style>

  <h1> Hello World! </h1>
  <br>

  <h2>Container Title</h2>
  <div class="horizontal-scroll-container">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
  </div>

  <h2>Container 2 Title</h2>
  <div class="horizontal-scroll-container">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
  </div>

  <script>
    // 事件委托：监听body上的滚轮事件
    document.body.addEventListener('wheel', (event) => {
      // 向上遍历DOM，找到最近的目标滚动容器
      const container = event.target.closest('.horizontal-scroll-container');
      if (!container) return; // 不在目标容器内则终止执行

      event.preventDefault();
      // 根据滚轮方向设置横向滚动距离
      container.scrollBy({
        left: event.deltaY < 0 ? -30 : 30,
        behavior: 'smooth' // 可选：添加平滑滚动效果，不需要可删除
      });
    });

    // 测试动态创建容器：2秒后自动添加新容器
    setTimeout(() => {
      const newContainer = document.createElement('div');
      newContainer.className = 'horizontal-scroll-container';
      for (let i = 1; i <= 10; i++) {
        const p = document.createElement('p');
        p.textContent = i;
        newContainer.appendChild(p);
      }
      document.body.insertAdjacentHTML('beforeend', '<h2>动态创建的容器</h2>');
      document.body.appendChild(newContainer);
    }, 2000);
  </script>
</body>
</html>

关键说明 #

• closest()方法：向上遍历DOM树，精准找到触发事件的目标容器，避免事件误触发。
• 事件委托优势：无需为每个容器单独绑定事件，页面加载后动态创建的容器自动继承滚动功能。
• 平滑滚动可选：behavior: 'smooth'可让滚动更流畅，不需要可直接移除该配置。

内容的提问来源于stack exchange，提问作者Autumn Jing Green