当我们编写前端代码时，经常会涉及到处理滚动相关的问题。在这些场景下，scrollTop 和 scrollHeight 是比较常见的两个属性。但是，很多人可能会混淆它们，不知道何时该使用哪个属性。本文将详细介绍 scrollTop 和 scrollHeight 的区别，并提供一些示例代码帮助您更好地理解它们。
scrollTop
scrollTop 属性用于获取或设置一个元素的垂直滚动条位置。比如，我们可以使用 scrollTop 来确定用户是否已经滚动到了页面底部，如下所示：
const element = document.getElementById('myElement');
if (element.scrollTop + element.clientHeight >= element.scrollHeight) {
// 用户已经滚动到了页面底部
}在这个例子中，我们首先获取了一个名为 myElement 的元素。然后，我们检查该元素的 scrollTop 是否加上其 clientHeight 大于等于 scrollHeight。如果满足条件，说明用户已经滚动到了页面底部。
请注意，scrollTop 只适用于具有滚动条的元素。
scrollHeight
scrollHeight 属性用于获取一个元素的内容高度（包括在视口之外的内容）。通常情况下，一个元素的 scrollHeight 等于其实际高度加上溢出内容的高度。我们可以通过以下代码来获取一个元素的 scrollHeight：
const element = document.getElementById('myElement');
const scrollHeight = element.scrollHeight;在上面的代码中，我们获取了一个名为 myElement 的元素，并将其 scrollHeight 存储在变量 scrollHeight 中。
区别
scrollTop 和 scrollHeight 之间的区别可以总结如下：
- scrollTop 是一个属性，用于获取或设置垂直滚动条位置。
- scrollHeight 是一个属性，用于获取一个元素的内容高度（包括在视口之外的内容）。
简而言之，scrollTop 记录的是具有滚动条的元素当前所在的垂直位置，而 scrollHeight 则记录的是该元素实际高度以及溢出内容的高度。
示例代码
以下代码演示了如何使用 scrollTop 和 scrollHeight 来处理滚动相关的问题：
-- -------------------- ---- -------
--------- -----
------
------
---------------- --- --------------------
-------
---------- -
------- ------
----------- -------
----------------- -----
-
--------
-------
------
---- ---------------
-------- ----- ----- --- ----- ----------- ---------- ----- --- ---- ----- --- ----- -------- --------- ---------- ---- ----- ------ -- -------- ---- ------ -- -------- ------- ------- ------ ----- ---- ----- --------- ---- -------- ---- ------- --- ----- ----- -------- ------- ------ -- -------- ------ -------- --- -------- --------- ----- ----- ------ ---------- -- ------- ------ --------- -- --- --------- ------ -------------
--------------- -- -- ---------- ------- -- ----- -------- ----- --------- -- ----- --- ---- --- ------- ------- --- --- ---- --------- --------- ---- --- ----------- ------ ----------- --- --- --------- -------- ---- --- -------- ------ ----- --------- ----- -- --------- ---------- ---- ----- ------- ----- - ------- ----- ----- -- ----- ------ -------- ------ --- ----- --------- -------------
------------- ------ -------- ----- --- --------- ---- ------ --- ----- --------- ------- ------- ---- ------- ----- --------- --- ------- ---- -------- ------ ----- ------ ----- -------- ------- ----- --- ------- ------ -------- ---------- --- ----- ------ -------- -------- --- -- ----- ---
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------