启用scroll-snap-type时，如何在JavaScript中设置scrollLeft？

问题场景 #

给容器设置scroll-snap-type: x mandatory实现水平滚动吸附后，点击按钮调用element.scrollLeft += 50的滚动逻辑完全失效；移除该属性后，按钮滚动功能正常。

原因 #

scroll-snap-type: x mandatory是强制滚动吸附规则，只要滚动动作结束，浏览器会自动将容器滚动到最近的吸附点（子元素默认以起始位置为吸附点）。当你每次仅设置滚动50px时，这个距离不足以让容器跨越到下一个吸附点，浏览器会立刻把滚动位置修正回原吸附点，所以视觉上没有任何滚动效果。

解决方案 #

方案1：直接滚动到下一个吸附元素位置 #

计算子元素的偏移量，点击按钮时直接定位到下一个子元素的吸附位置，既满足吸附要求，又能实现按钮控制滚动：

function myFunction() {
  const container = document.getElementById("myDIV");
  const children = [...container.children];
  // 找到当前可视范围内的子元素索引
  const currentIndex = children.findIndex(child => {
    return child.offsetLeft + child.offsetWidth > container.scrollLeft;
  });
  // 滚动到下一个元素（最后一个元素则回到第一个）
  const targetIndex = (currentIndex + 1) % children.length;
  container.scrollLeft = children[targetIndex].offsetLeft;
}

document.getElementById("button").addEventListener('click', myFunction);

方案2：临时禁用吸附再恢复（适合小步长滚动场景） #

如果确实需要每次滚动50px的小步长，可以先临时移除scroll-snap属性，滚动完成后再恢复，避免浏览器强制修正：

function myFunction() {
  const container = document.getElementById("myDIV");
  // 临时移除强制吸附类
  container.classList.remove("mandatory-scroll-snapping");
  // 执行滚动
  container.scrollLeft += 50;
  // 等待滚动完成后恢复吸附
  setTimeout(() => {
    container.classList.add("mandatory-scroll-snapping");
  }, 100);
}

document.getElementById("button").addEventListener('click', myFunction);

补充说明 #

确保子元素的吸附位置生效，可显式设置scroll-snap-align（默认值为start）：

.container > div {
  scroll-snap-align: start;
}

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