HTML：逐行滚动

Question

我有一个包含可变数量列表项的无序列表。 <ul> 的高度是固定的（实际上是单行文本的高度）并设置为overflow-y: scroll。

当我滚动鼠标滚轮时，会经过一定的垂直距离。我想让它逐行滚动，以确保<li> 始终正确居中在<ul> 的可见部分。

错误行为：

:root {
  --default-line-height: 24px;
}

.myUl {
  background-color: lightblue;
  height: var(--default-line-height);
  list-style-type: none;
  overflow-y: scroll;
  outline: 1px solid black;
}

.myLi {
  font-size: var(--default-line-height);
}

<ul class="myUl">
  <li class="myLi">Lorem ipsum dolor sit amet</li>
  <li class="myLi">Aenean commodo ligula eget dolor.</li>
  <li class="myLi">Cum sociis natoque penatibus</li>
  <li class="myLi">Donec quam felis, ultricies nec</li>
  <li class="myLi">Nulla consequat massa quis enim.</li>
  <li class="myLi">Donec pede justo, fringilla vel</li>
  <li class="myLi">In enim justo, rhoncus ut</li>
</ul>

<p>Please scroll the blue area.</p>

---

我玩过scroll-snap，但没有真正成功。动画“感觉”很尴尬，它仍然滚动多行。我可能可以用scroll 构建一些东西，但这似乎不必要地麻烦。

在某些条件下能够逐行滚动似乎是合理的。类似列表的控件（例如下拉菜单）在许多框架中都显示了这种行为。我不会认为这需要的不仅仅是一些聪明的 css...

---

更新： 下面的Feroz’s answer 仅解决了问题的捕捉方面。仍然可以一次滚动多行。

Answer 1

请检查我的 sn-p。现在你可以逐行滚动了。

:root {
  --default-line-height: 28px;
}

.myUl {
  background-color: lightblue;
  height: var(--default-line-height);
  list-style-type: none;
  overflow-y: scroll;
  outline: 1px solid black;
  scroll-snap-type: y mandatory;
}

.myLi {
  font-size: 24px;
  line-height: var(--default-line-height);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

<ul class="myUl">
  <li class="myLi">Lorem ipsum dolor sit amet</li>
  <li class="myLi">Aenean commodo ligula eget dolor.</li>
  <li class="myLi">Cum sociis natoque penatibus</li>
  <li class="myLi">Donec quam felis, ultricies nec</li>
  <li class="myLi">Nulla consequat massa quis enim.</li>
  <li class="myLi">Donec pede justo, fringilla vel</li>
  <li class="myLi">In enim justo, rhoncus ut</li>
</ul>

<p>Please scroll the blue area.</p>

Answer 2

在https://css-tricks.com/practical-css-scroll-snapping/找到解决方案

<div class="container">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
  <p>...</p>
</div>

.container {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}