当我们使用鼠标滚轮时，浏览器会通过 WheelEvent 提供相关信息，以方便开发者对其进行处理。其中一个重要的属性是 deltaMode ，它用于指定事件中的 deltaX 和 deltaY 的度量单位。
在 deltaMode 为 DOM_DELTA_PIXEL 时，我们可以非常容易地理解，即每次滚动产生的像素值。但是，当 deltaMode 为 DOM_DELTA_LINE 时，它代表的是文本滚动的行数，这就需要我们进一步了解。
“line”高度的计算
在文档中，行高通常由两个因素决定：字体大小和行间距。例如，在以下 CSS 规则中：
p {
font-size: 16px;
line-height: 1.5;
}其中的 line-height 值为 1.5，意味着该段落的行高为 16 * 1.5 = 24 像素。因此，当我们使用 DOM_DELTA_LINE 模式滚动时，每次滚动通常会移动一整行的内容，高度为 24 像素。
但是，实际情况可能会更加复杂。如果文本中存在不同大小的字体或行高，则每个“line”的高度可能会不同。此外，某些浏览器可能会在特定情况下更改行高计算方式，例如当页面中使用禁止缩放的 viewport 时。
示例代码
以下是一个示例代码，它通过监听鼠标滚轮事件并输出每次滚动移动的像素值和“line”高度：
-- -------------------- ---- -------
----- -- - ----------------------------
--- -----------
-------- ------------------ -
----- ------------- - ---------------------
----- -------- - -----------------------------------
----- ----------- - ------------------------------------ - ---------
---------- - -------- - ------------
-
-------------------
---------------------------- - -- -
-------------------
----- ----- - ---------
----- --------- - ------------
--- ---------
-- ---------- --- --------------------------- -
-------- - ------
- ---- -- ---------- --- -------------------------- -
-------- - ----- - -----------
- ---- -
-------- - ----- - ---------- - --
-
-------------------- ------------ ------- --------------
---------------------- -------------- ---- ------- ------------------
---该代码首先获取了一个 <p> 元素的 fontSize 和 lineHeight 值，然后通过监听滚轮事件来计算每次滚动的距离，以及当前文本的“line”高度。这可以帮助我们更好地理解 DOM_DELTA_LINE 模式下的行高计算方式。
总结
通过本文，我们了解了鼠标滚轮事件中“line”高度的计算方式。尽管在大多数情况下，“line”高度可以简单地计算为字体大小和行间距之和，但实际情况可能更加复杂。了解这些细节可以帮助我们更好地处理滚轮事件，并编写更具可维护性的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30869
