如何控制滚动距离？

Question

我正在尝试创建以下滚动行为（在 React 中）：滚轮的每个单独的“滴答”以 100 像素的倍数滚动（跨浏览器/操作系统）。

我的做法：向列表框添加滚动事件处理程序以滚动 100 像素。

我使用了onWheel 和Element.scrollBy()：

onWheel={(event) => {
  event.currentTarget.scrollBy({
    top: Math.sign(event.deltaY) * 100, // 100 pixels in the right direction
    behavior: 'smooth',
  });
}}

https://codesandbox.io/s/modest-lichterman-3iu0r

有两个问题：

1. 用户滚动和 JavaScript 滚动都执行，并且尝试阻止事件的默认设置不起作用。
2. behavior: 'smooth' 动画使尝试快速滚动变得极其缓慢。我找不到如何更改动画的持续时间。

我找到了this Stack Overflow 问题（以及几个类似的问题），但我不确定如何将答案应用于此问题。

谢谢！

Answer 1

我正在搜索的功能可以通过 CSS 滚动捕捉（浏览器实现的功能）提供。

CSS Scroll Snap 是一个 CSS 模块，它引入了滚动捕捉位置，它强制滚动容器的滚动端口在滚动操作完成后可能结束的滚动位置。

MDN