javascript - 当用户在 Javascript 中使用鼠标滚轮开始滚动时，如何确定用户将滚动多少像素

Question

如何确定当用户开始使用javascript中的鼠标滚轮滚动时垂直滚动条将移动多少像素

我有一种情况，用户的滚动会导致 offsetTop 在 200px 到 1000px 之间变化，我想提前知道，我们有什么办法可以使用 javascript 解决这种情况吗？

Answer 1

如果我正确理解您的问题，简短的回答是“否”。为了说明这一点，请考虑以下等效问题:

I have detected a keydown event on the down arrow. Can I predict when the user will release the down key?

这是不可能的。何时释放 key 取决于用户，您无法预测何时释放。

具体关于鼠标滚轮事件，您还需要考虑硬件/鼠标和软件/浏览器的变化，这将使(已经不可能？)任务变得更加困难。

另一种方法:消除鼠标滚轮事件

如果没有关于总体目标的更多信息，则很难知道这是否有帮助，但您可以使用去抖动功能来规范一段时间内的鼠标滚轮事件。因此，无论用户滚动(比如说)0.5 秒还是 1 秒，您都只会收到一个事件，这应该会简化您需要进行的任何计算。

Here is a basic Javascript Stackblitz example ，每 0.1 秒消除一次鼠标滚轮事件。如果您连续滚动鼠标滚轮，则只应发出第一个事件。

RxJS has a debounceTime function内置。我不熟悉 React，所以我无法确切地建议如何将其应用于鼠标事件，但原理与上面的示例相同。