可以将 scrollTop 和 scrollHeight 区分开来吗？

当我们编写前端代码时，经常会涉及到处理滚动相关的问题。在这些场景下，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 来处理滚动相关的问题：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>scrollTop vs. scrollHeight</title>
    <style>
        #myElement {
            height: 100px;
            overflow-y: scroll;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="myElement">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget justo vel lorem pulvinar molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin elit elit, ultricies quis suscipit vel, aliquam nec odio. Fusce interdum euismod nulla, eu bibendum libero pulvinar et. Maecenas dignissim metus vitae tellus efficitur, at viverra tortor placerat. In hac habitasse platea dictumst.</p>
        <p>Pellentesque id ex tincidunt, aliquet mi quis, accumsan elit. Phasellus in augue sit amet est rhoncus semper. Sed vel arcu interdum, dignissim nisi ut, scelerisque magna. Suspendisse sed dui eleifend, bibendum nunc et, molestie dolor. Fusce lobortis, nulla eu consequat hendrerit, nibh justo sodales diam, a egestas ipsum neque ac ante. Nullam faucibus sapien non massa convallis placerat.</p>
        <p>Vestibulum luctus vehicula erat, vel facilisis enim mollis et. Morbi malesuada commodo libero, quis commodo nulla elementum ut. Aliquam quis pharetra velit. Nulla auctor felis euismod, maximus augue ut, commodo lorem. Maecenas vestibulum est vitae tellus faucibus dapibus. Sed at metus leo

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/30947) ，转载请注明来源
[https://www.javascriptcn.com/post/30947](https://www.javascriptcn.com/post/30947)