如何基于视口实现单次滚动自动定位到下一个section（共10个section）

方案1：纯CSS原生滚动捕捉（优先推荐，无额外依赖） #

原生CSS的滚动捕捉属性可以直接实现需求，不需要写JS，兼容性覆盖绝大多数主流浏览器。
首先调整你的HTML结构：你目前所有内容都包裹在同一个<section>标签内，需要将每个需要独立停靠的模块拆分为单独的<section>，示例结构如下：

<!-- 第1个停靠单元 -->
<section>
  <div class="fluid-container">
    <div class="row">
      <div class="ttd-banner">
        <img src="images/image-1.jpg">
        <div class="title">
          <h4>Heading</h4>
        </div>
      </div>
      <div class="container mt-20">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
</section>

<!-- 第2个停靠单元 -->
<section>
  <div class="fluid-container">
    <div class="row">
      <div class="ttd-banner">
        <img src="images/image-1.jpg">
        <div class="title">
          <h4>Heading</h4>
        </div>
      </div>
      <div class="container mt-20">
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
</section>

<!-- 剩余8个停靠单元按照上述格式补充即可 -->

然后修改CSS样式：

/* 给滚动根容器配置滚动捕捉规则 */
html, body {
  height: 100%;
  overflow-y: auto;
  /* 纵向滚动，强制停靠到最近的捕捉点 */
  scroll-snap-type: y mandatory;
  /* 平滑滚动效果，可根据需求删除 */
  scroll-behavior: smooth;
  /* 去掉默认滚动边距 */
  margin: 0;
  padding: 0;
}

/* 每个停靠单元配置对齐规则 */
section {
  /* 可根据需求调整为固定高度，比如你原有内容高度总和，这里默认占满整个视口 */
  min-height: 100vh;
  /* 停靠时单元顶部和视口顶部对齐 */
  scroll-snap-align: start;
}

/* 原有样式保留 */
.ttd-banner{
  height:600px;
}

如果想要停靠更宽松，可以把scroll-snap-type: y mandatory改为scroll-snap-type: y proximity，只有滚动位置接近捕捉点时才会触发停靠。

方案2：JS实现（适配低版本浏览器场景） #

如果需要兼容不支持CSS滚动捕捉的老旧浏览器，可以用JS监听滚动事件实现，代码如下：

// 锁定滚动状态，防止连续触发滚动
let isScrollLock = false;
// 获取所有停靠单元，如果你没有调整HTML结构，也可以把选择器改为'.row'
const sections = document.querySelectorAll('section');
const totalSection = sections.length;
// 当前停留的单元索引
let currentIndex = 0;

window.addEventListener('wheel', (e) => {
  // 滚动锁定状态下不触发逻辑
  if (isScrollLock) return;
  isScrollLock = true;

  // 向下滚动，索引+1，不超过最大数量
  if (e.deltaY > 0 && currentIndex < totalSection - 1) {
    currentIndex++;
  }
  // 向上滚动，索引-1，不小于0
  else if (e.deltaY < 0 && currentIndex > 0) {
    currentIndex--;
  }

  // 滚动到对应单元
  sections[currentIndex].scrollIntoView({
    behavior: 'smooth'
  });

  // 滚动动画结束后解锁，时长可根据实际动画效果调整
  setTimeout(() => {
    isScrollLock = false;
  }, 800);
}, { passive: false });

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