javascript - 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

请检查我的片段。现在您可以逐行滚动。

: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>