DOMElement.scroll()无法滚动水平网格div的问题求助

你的代码核心问题是选错了滚动容器：

• 实际设置overflow-x: scroll的是.cards-grid元素，但你在代码中把箭头的父元素.cards-grid-wrapper当作滚动容器（const parentGrid = arrow.parentElement），而这个父元素没有滚动属性，所以调用它的scroll()方法不会有任何效果，scroll事件也不会触发。

修复方案 #

修改JS代码，正确获取真正的滚动容器.cards-grid：

const vwToPx = (vw) => document.documentElement.clientWidth * vw / 100;

const scrollingArrows = document.querySelectorAll(".scroll-arrow");

scrollingArrows.forEach(arrow => {
  // 从父容器中找到真正的滚动网格元素
  const parentGrid = arrow.parentElement.querySelector(".cards-grid");

  parentGrid.addEventListener("scroll", () => console.log("scroll"));

  arrow.addEventListener("click", () => {
    const scrollLength = vwToPx(30) * 3 * (arrow.classList.contains("back-arrow") ? -1 : 1);

    console.log(parentGrid.scrollLeft, scrollLength);

    parentGrid.scroll({
      left: parentGrid.scrollLeft + scrollLength,
      behavior: "smooth"
    });

    console.log("scrolled");
  });
});

关键改动说明 #

• 将const parentGrid = arrow.parentElement替换为const parentGrid = arrow.parentElement.querySelector(".cards-grid")，确保操作的是带有滚动属性的容器元素。
• 其余逻辑保持不变，点击箭头时就能正确触发.cards-grid的滚动，scroll事件也会正常触发。

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