如何在使用x轴scroll snap时避免触发y轴滚动吸附？

我的页面在y轴方向较长，我在一个宽div上设置了x轴的scroll snap点。当我使用x轴滚动吸附时，页面同时也会在y轴方向触发吸附，请问如何排除或阻止y轴的滚动吸附？

我尝试的CSS代码如下：

.slides {
       display: flex;
       overflow:-x: auto;
       scroll-snap-type: x mandatory;
       scroll-behavior: smooth;
}

补充HTML代码：

<div class="slider">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>

  <div class="slides">
    <div id="1">
      <img src="{{ r.image_field.url }}">
    </div>
    <div id="2}">
      <img src="{{ r.image_field2.url }}">
    </div>
    <div id="3">
      <img src="{{ r.image_field3.url }}">
    </div>
  </div>
</div>

解决方案 #

步骤1：修正CSS语法错误 #

你写的overflow:-x: auto;存在语法错误，正确写法是overflow-x: auto;，否则该属性无法生效，滚动容器的x轴滚动功能会异常。

步骤2：明确子元素的吸附方向 #

给每个slide子元素添加scroll-snap-align: start;，强制指定仅在x轴方向触发吸附，避免浏览器默认触发y轴的吸附行为。同时添加flex-shrink: 0和width: 100%，确保每个slide不会被压缩，保持容器宽度一致。

步骤3：排除上层容器的y轴吸附干扰 #

检查页面上层容器（比如<body>或者.slider）是否设置了scroll-snap-type的y轴相关属性，若有则移除；同时给.slider添加overflow-y: visible;，避免其成为y轴滚动容器触发不必要的吸附。

修改后的完整代码 #

CSS

.slides {
  display: flex;
  overflow-x: auto; /* 修正语法错误 */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* 可选：隐藏滚动条，优化视觉效果 */
  scrollbar-width: none;
}

.slides > div {
  scroll-snap-align: start; /* 明确x轴吸附位置 */
  flex-shrink: 0; /* 禁止slide被压缩 */
  width: 100%; /* 每个slide占满容器宽度 */
}

/* 可选：隐藏webkit内核浏览器的滚动条 */
.slides::-webkit-scrollbar {
  display: none;
}

.slider {
  overflow-y: visible; /* 避免触发y轴滚动吸附 */
}

HTML（修正id的语法错误）

<div class="slider">
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>

  <div class="slides">
    <div id="1">
      <img src="{{ r.image_field.url }}">
    </div>
    <div id="2">
      <img src="{{ r.image_field2.url }}">
    </div>
    <div id="3">
      <img src="{{ r.image_field3.url }}">
    </div>
  </div>
</div>

原理说明 #

• scroll-snap-align: start明确绑定了子元素与滚动容器的x轴对齐规则，浏览器只会在x轴滚动时触发吸附逻辑。
• 修正滚动容器的语法错误，确保x轴滚动功能正常生效。
• 上层容器设置overflow-y: visible，避免其成为y轴滚动容器，从根源上阻止y轴吸附触发。

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