Elementor中如何仅为部分容器设置滚动吸附？滚动异常求助

我给3个容器添加了CSS滚动吸附后效果正常，但第四个未设置滚动吸附的容器滚动不流畅，总是卡在第三个容器下方。使用的代码如下：

/* Set the root element for scroll snap */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Apply scroll snap effect to the container */
.scroll-snap-container {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

问题原因 #

直接在html和body上设置scroll-snap-type: y mandatory会让整个页面的滚动强制吸附到所有带scroll-snap-align的元素上。第四个容器没有设置吸附属性，但浏览器滚动时仍会尝试对齐最近的吸附点（第三个容器），导致滚动卡顿、无法正常滑到第四个容器区域。

解决方案 #

把滚动吸附的作用范围限制在需要的容器内，不要全局作用于html/body：

1. 在Elementor中，给那3个需要吸附的容器外层添加一个父容器，并给这个父容器设置自定义类（比如scroll-snap-wrapper）
2. 修改CSS代码如下：

/* 独立滚动容器，仅作用于内部需要吸附的元素 */
.scroll-snap-wrapper {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* 保持原有的吸附容器样式 */
.scroll-snap-container {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

/* 重置全局样式，移除html/body上的滚动吸附设置 */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

这样设置后，滚动吸附只会在scroll-snap-wrapper内部生效，第四个容器作为普通元素，滚动时就不会再被强制吸附，恢复流畅的滚动体验。

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