如何让可滚动父容器中的子元素逐次滚动？

我需要实现一个选项列表选择功能，用户滚动或滑动时可定位到目标选项。但当前桌面端滚动一次会跳过多个选项（比如顶部显示“1”的元素，滚动一次后直接跳到“4”，预期应为“2”），该代码在iOS的Chrome和Safari上表现正常。请问如何通过CSS或jQuery在桌面端实现逐项滚动的效果？或是我的代码存在什么错误？HTML结构可按需调整（当前是div嵌套结构，也可改用select/option或ul/li）。

原代码如下：

原CSS代码 #

.box {
  background-color: yellowgreen;
  height: 300px;
  overflow: hidden;
}

.scroll {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
}

.scroll div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 5px 0;
  padding: 10px;
  background-color: lightpink;
  scroll-snap-align: center;
}

.scroll div:first-of-type {
  margin-top: calc((50% - 20px));
}

.scroll div:last-of-type {
  margin-bottom: calc((50% - 20px));
}

原HTML代码 #

<div class="box">
  <div class="scroll">
    <div>List item: 1</div>
    <div>List item: 2</div>
    <div>List item: 3</div>
    <div>List item: 4</div>
    <div>List item: 5</div>
    <div>List item: 6</div>
    <div>List item: 7</div>
    <div>List item: 8</div>
    <div>List item: 9</div>
    <div>List item: 10</div>
  </div>
</div>

桌面端鼠标滚轮的默认滚动增量远大于移动端触摸滑动的步长，即使设置了scroll-snap-stop: always，当单次滚动覆盖多个元素的捕捉范围时，浏览器会直接跳到最近的有效捕捉点，导致跳过选项。另外，当前元素的上下外边距+自身高度的总和（40+102+52=70px）让相邻元素的捕捉中心间距较大，进一步加剧了这个问题。

方案1：纯CSS优化（优先推荐） #

调整滚动容器和选项元素的样式，缩小捕捉点间距，优化滚动行为：

.box {
  background-color: yellowgreen;
  height: 300px;
  overflow: hidden;
}

.scroll {
  width: 100%;
  height: 100%;
  background-color: aliceblue;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
  scroll-behavior: smooth; /* 平滑滚动过渡 */
  padding-top: calc(50% - 30px); /* 让第一个元素初始居中 */
  padding-bottom: calc(50% - 30px); /* 让最后一个元素滚动后居中 */
}

.scroll div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px; /* 合并padding到height，简化间距 */
  margin: 0;
  padding: 0;
  background-color: lightpink;
  scroll-snap-align: start; /* 改用顶部对齐，让捕捉点连续 */
  border-bottom: 1px solid #fff; /* 用边框代替margin做分隔 */
}

优化说明： #

• 将scroll-snap-align从center改为start，让每个元素的顶部作为捕捉点，相邻捕捉点的间距等于元素高度（60px），大幅降低跳过概率。
• 移除元素的上下外边距，改用容器的上下padding实现首尾元素居中，同时用边框做元素分隔，保证视觉间距的同时让捕捉点更紧凑。
• 添加scroll-behavior: smooth，让滚动过渡更自然，部分浏览器会自动适配滚轮步长。

方案2：jQuery控制滚动步长 #

如果CSS优化无法满足需求，可通过JS监听滚轮事件，强制控制每次滚动只移动一个元素：

<div class="box">
  <div class="scroll">
    <div>List item: 1</div>
    <div>List item: 2</div>
    <div>List item: 3</div>
    <div>List item: 4</div>
    <div>List item: 5</div>
    <div>List item: 6</div>
    <div>List item: 7</div>
    <div>List item: 8</div>
    <div>List item: 9</div>
    <div>List item: 10</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  const $scrollContainer = $('.scroll');
  const $items = $scrollContainer.find('div');
  const itemTotalHeight = $items.first().outerHeight();
  let activeIndex = 0;
  const totalItemsCount = $items.length;

  $scrollContainer.on('wheel', function(e) {
    e.preventDefault(); // 阻止默认滚轮滚动行为

    // 判断滚动方向，更新索引
    const scrollDirection = e.originalEvent.deltaY > 0 ? 1 : -1;
    activeIndex = Math.max(0, Math.min(totalItemsCount - 1, activeIndex + scrollDirection));

    // 计算目标滚动位置，让元素居中显示
    const targetScrollTop = $items.eq(activeIndex).offset().top - $scrollContainer.offset().top + $scrollContainer.scrollTop();
    const centeredScrollTop = targetScrollTop - ($scrollContainer.height() / 2) + (itemTotalHeight / 2);
    
    // 平滑滚动到目标位置
    $scrollContainer.animate({ scrollTop: centeredScrollTop }, 300);
  });
});
</script>

JS方案说明： #

• 监听滚轮事件，阻止默认滚动行为，手动控制滚动位置。
• 限制索引范围，避免滚动超出选项列表边界。
• 通过animate实现平滑滚动，确保每次滚动后目标元素居中显示，和移动端效果一致。

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