Elementor项目已实现横向滚动，如何添加整页吸附对齐滚动效果

CSS原生实现（优先选用） #

你只需要在现有CSS基础上新增滚动吸附相关配置即可，原生属性性能最优，兼容性覆盖所有主流现代浏览器：

html {
  scroll-behavior: smooth;
}
@media only screen and (min-width: 1025px) {
    main {
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;
      /* 新增滚动吸附配置 */
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
    }
    /* 可选：隐藏横向滚动条 */
    main::-webkit-scrollbar {
      display: none;
    }
    main {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    section {
      min-width: 100vw!important;
      min-height: 100vh!important;
      /* 新增吸附对齐规则 */
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
}

修改说明：

• 将main的overflow-x: hidden改为overflow-x: scroll，保证滚动行为可被捕获
• 新增scroll-snap-type: x mandatory强制横向滚动时自动吸附到子元素位置
• 给section新增scroll-snap-align: start和scroll-snap-stop: always，保证每次滚动刚好对齐整页，不会划过多个页面
• 新增的滚动条隐藏代码是可选配置，不需要显示滚动条可以保留

JS逻辑优化（可选，解决滚动灵敏度问题） #

原有JS直接累加滚动距离，会出现一次滚动划过多个页面的问题，优化后按页面粒度跳转：

if (window.innerWidth > 1025) {
  const scrollContainer = document.querySelector("main");
  let isScrolling = false;
  const pageWidth = window.innerWidth;
  let currentPage = 0;
  const totalPages = scrollContainer.querySelectorAll('section').length;

  scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    if (isScrolling) return;
    isScrolling = true;

    // 判断滚动方向
    if (evt.deltaY > 0 && currentPage < totalPages - 1) {
      currentPage++;
    } else if (evt.deltaY < 0 && currentPage > 0) {
      currentPage--;
    }

    // 滚动到对应页面位置
    scrollContainer.scrollTo({
      left: currentPage * pageWidth,
      behavior: 'smooth'
    });

    // 滚动结束后解除锁定，可根据动画时长调整延迟时间
    setTimeout(() => {
      isScrolling = false;
    }, 600);
  });
}

适配Elementor的注意点 #

• 确认你的横向滚动容器是main标签，如果Elementor自定义了容器类名，替换JS和CSS中的main选择器即可
• 确保所有需要整页展示的区块都是滚动容器的直接子元素，层级对应正确
• 断点逻辑和你原有配置保持一致，1025px以下设备依然保留默认竖向滚动

内容的提问来源于stack exchange，提问作者Alex P.