JS滚动画廊脚本仅单实例生效，多画廊适配问题求助

我跟着教程做了一个可滚动画廊，第一个画廊运行正常，但复制并修改类名/ID后，另外两个画廊完全无法滚动。

可正常运行的代码 #

JavaScript #

let scrollContainer= document.querySelector (".gallery")
let arrowLeft = document.getElementById("arrowLeft")
let arrowRight = document.getElementById("arrowRight")

scrollContainer.addEventListener ("wheel", (evt) => {
  evt.preventDefault ();
  scrollContainer.scrollLeft +=evt.deltaY;
});

arrowLeft.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft -= 900;
});

arrowRight.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft += 900;
});

HTML #

<section id="Welcome">
  <h2>
    Welcome
  </h2>
  <div class="gallery-wrap">
    <img id="arrowLeft" src="images/arrow_left.jpg">
    <div class="gallery">
      <div>
        <span >
          <a href="https://www.hdm-stuttgart.de/">
            <img src="images/audiovisualmedia.jpg">
            <p>
              Placeholder
            </p>
          </a>
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
      <div>
        <span>
          <img src="images/audiovisualmedia.jpg">
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
    </div>
    <img id="arrowRight"src="images/arrow_right.png">
  </div>            
</section>

无法滚动的代码（修改后） #

JavaScript #

let scrollContainer= document.querySelector (".gallery2")
let arrowLeft2 = document.getElementById("arrowLeft2")
let arrowRight2 = document.getElementById("arrowRight2")

scrollContainer.addEventListener ("wheel", (evt) => {
  evt.preventDefault ();
  scrollContainer.scrollLeft +=evt.deltaY;
});

arrowLeft2.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft -= 900;
});

arrowRight2.addEventListener ("click", () => {
  scrollContainer.style.scrollBehavior = "smooth";
  scrollContainer.scrollLeft += 900;
});

HTML #

<section id="Cocktails">
  <h2>
    Cocktails
  </h2>
  <div class="gallery-wrap2">
    <img id="arrowLeft2" src="images/arrow_left.jpg">
    <div class="gallery2">
      <div>
        <span >
          <a href="https://www.hdm-stuttgart.de/">
            <img src="images/audiovisualmedia.jpg">
            <p> Placeholder</p>
          </a>
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
      <div>
        <span>
          <img src="images/audiovisualmedia.jpg">
        </span>
        <span>
          <img src="images/hdm.jpg">
        </span>
        <span>
          <img src="images/hdm_building.jpg">
        </span>
        <span>
          <img src="images/mobilemedia.jpg">
      </div>
    </div>
    <img id="arrowRight2"src="images/arrow_right.png">
  </div>            
</section>

解决办法 #

1. 同步修改CSS样式 #

第一个画廊的.gallery和.gallery-wrap肯定设置了关键滚动样式（比如横向溢出、弹性布局），你只改了HTML和JS的类名，但.gallery2和.gallery-wrap2没有对应的CSS，这是核心问题。给新画廊添加和原画廊一致的样式：

.gallery2 {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none; /* 可选：隐藏滚动条 */
}
.gallery2::-webkit-scrollbar {
  display: none; /* 可选：隐藏webkit内核浏览器滚动条 */
}
.gallery2 > div {
  display: flex;
  gap: 1rem; /* 和原画廊保持一致的间距 */
  flex-shrink: 0;
}
.gallery-wrap2 {
  display: flex;
  align-items: center;
  gap: 1rem;
}

2. 避免变量名冲突 #

如果三个画廊的JS代码放在同一个文件里，重复使用scrollContainer变量会导致后面的覆盖前面的，最终只有最后一个画廊生效。建议用批量处理的方式，不用重复写代码：

// 批量绑定所有画廊的事件
document.querySelectorAll('.gallery-wrap, .gallery-wrap2').forEach(wrap => {
  const scrollContainer = wrap.querySelector('[class^="gallery"]');
  const arrowLeft = wrap.querySelector('[id^="arrowLeft"]');
  const arrowRight = wrap.querySelector('[id^="arrowRight"]');

  scrollContainer.addEventListener('wheel', (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
  });

  arrowLeft.addEventListener('click', () => {
    scrollContainer.style.scrollBehavior = 'smooth';
    scrollContainer.scrollLeft -= 900;
  });

  arrowRight.addEventListener('click', () => {
    scrollContainer.style.scrollBehavior = 'smooth';
    scrollContainer.scrollLeft += 900;
  });
});

只要后续画廊保持相同的结构（包裹容器+箭头+画廊元素），就能自动绑定事件，不用再写重复代码。

3. 检查元素加载顺序 #

打开浏览器控制台（F12），如果看到Cannot read properties of null的错误，说明JS代码在HTML元素加载前执行了。解决办法：把JS代码放在</body>标签前，或者用DOMContentLoaded包裹：

document.addEventListener('DOMContentLoaded', () => {
  // 这里放你的画廊JS代码
});

内容的提问来源于stack exchange，提问作者Tarasynora