CSS scroll-snap图片滚动组件拖拽时跳动问题求助

核心原因 #

自定义拖拽逻辑和CSS scroll-snap 的自动对齐行为冲突，加上 scroll-behavior: smooth 的平滑滚动效果，导致拖拽过程中画面出现无规则跳动。

解决方案 #

1. 拖拽时临时禁用scroll-snap，松开后恢复

在鼠标按下时移除scroll-snap-type属性，避免拖拽过程中自动对齐干扰，松开或离开时重新恢复：

function mouseIsDown(e) {
  isDown = true;
  startX = e.clientX - parent.getBoundingClientRect().left;
  scrollLeft = parent.scrollLeft;
  parent.style.scrollSnapType = "none"; // 禁用scroll-snap
}

function mouseUp(e) {
  isDown = false;
  parent.style.scrollSnapType = "x mandatory"; // 恢复scroll-snap
}

function mouseLeave(e) {
  isDown = false;
  parent.style.scrollSnapType = "x mandatory"; // 恢复scroll-snap
}

2. 临时禁用scroll-behavior: smooth

平滑滚动会和拖拽的即时滚动产生冲突，拖拽时临时关闭，结束后恢复：

function mouseIsDown(e) {
  // ... 原有代码
  parent.style.scrollBehavior = "auto"; // 禁用平滑滚动
}

function mouseUp(e) {
  // ... 原有代码
  parent.style.scrollBehavior = "smooth"; // 恢复平滑滚动（如需保留）
}

3. 优化拖拽计算逻辑

改用clientX代替pageX避免页面滚动时的坐标偏移，同时调整滚动速度系数（原*5会导致滚动过快，加剧跳动）：

function mouseMove(e) {
  if (isDown) {
    e.preventDefault();
    const x = e.clientX - parent.getBoundingClientRect().left;
    const walkX = x - startX; // 保持原生拖拽的速度感
    parent.scrollLeft = scrollLeft - walkX;
  }
}

完整修正后的代码

JavaScript

const parent = document.querySelector(".horizontal-snap");

let startX;
let scrollLeft;
let isDown;

parent.addEventListener("mousedown", mouseIsDown);
parent.addEventListener("mouseup", mouseUp);
parent.addEventListener("mouseleave", mouseLeave);
parent.addEventListener("mousemove", mouseMove);

function mouseIsDown(e) {
  isDown = true;
  startX = e.clientX - parent.getBoundingClientRect().left;
  scrollLeft = parent.scrollLeft;
  // 临时禁用scroll-snap和平滑滚动
  parent.style.scrollSnapType = "none";
  parent.style.scrollBehavior = "auto";
}

function mouseUp(e) {
  isDown = false;
  // 恢复scroll-snap和平滑滚动
  parent.style.scrollSnapType = "x mandatory";
  parent.style.scrollBehavior = "smooth";
}

function mouseLeave(e) {
  isDown = false;
  // 恢复scroll-snap和平滑滚动
  parent.style.scrollSnapType = "x mandatory";
  parent.style.scrollBehavior = "smooth";
}

function mouseMove(e) {
  if (isDown) {
    e.preventDefault();
    const x = e.clientX - parent.getBoundingClientRect().left;
    const walkX = x - startX;
    parent.scrollLeft = scrollLeft - walkX;
  }
}

CSS

.horizontal-snap {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  height: calc(180px + 1rem);
  padding: 1rem;
  max-width: 480px;
  overflow-y: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.horizontal-snap>a {
  scroll-snap-align: center;
}

.horizontal-snap img {
  width: 180px;
  max-width: none;
  object-fit: contain;
  border-radius: 1rem;
}

HTML

<div class="horizontal-snap" style="scroll-behavior: smooth;">
  <a href="#" class="childern"><img src=""></a>
  <a href="#" class="childern"><img src=""></a>
  <a href="#" class="childern"><img src=""></a>
  <a href="#" class="childern"><img src=""></a>
  <a href="#" class="childern"><img src=""></a>
  <a href="#" class="childern"><img src=""></a>
</div>

额外说明 #

如果不需要保留平滑滚动效果，直接移除HTML中的scroll-behavior: smooth;可以进一步减少冲突，提升拖拽流畅度。

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