JS属性scrollTop clientHeight scrollHeight理解学习

JS属性scrollTop、clientHeight、scrollHeight理解学习

在涉及到滚动的Web应用程序中，JavaScript提供了一些属性来帮助我们管理滚动机制。其中最常见的属性包括 scrollTop、clientHeight、scrollHeight。下面一一介绍这三个属性的含义，以及它们的用法和常见应用场景。

scrollTop

scrollTop属性用来返回或设置一个元素的垂直滚动条位置。当一个文档没有垂直滚动条时，该属性的值为0。

用法：

const elem = document.getElementById('foo');
const scrollTop = elem.scrollTop;

示例：

假如我们有一个可滚动的div，当用户滚动该div时，我们想要记录用户当前滚动的位置：

<div id="scrollable" style="height: 200px; overflow-y: scroll;">
  <p>Scroll me...</p>
  <p>Keep scrolling...</p>
  <p>Keep scrolling...</p>
  <p>Keep scrolling...</p>
  <p>Keep scrolling...</p>
  <p>Keep scrolling...</p>
  <p>Stop scrolling!</p>
</div>

我们可以通过监听 scroll 事件来实现：

const scrollable = document.getElementById('scrollable');
scrollable.addEventListener('scroll', function() {
  console.log(scrollable.scrollTop);
});

clientHeight

clientHeight属性返回一个元素的可见高度，即它的内部高度加上内部上下边距，但不包括滚动条、边框和外边距的高度。

用法：

const elem = document.getElementById('foo');
const clientHeight = elem.clientHeight;

示例：

当我们想要获取一个元素的可见区域高度时，可以使用 clientHeight：

<div id="box" style="border: 1px solid black; padding: 10px; height: 200px; overflow-y: scroll;">
  <p>Tiny paragraph 1</p>
  <p>Tiny paragraph 2</p>
  <p>Tiny paragraph 3</p>
  <p>Tiny paragraph 4</p>
  <p>Tiny paragraph 5</p>
  <p>...</p>
</div>

const box = document.getElementById('box');
console.log(box.clientHeight); // 200

scrollHeight

scrollHeight属性返回一个元素的内容高度，包括不可见的部分（因为如果内容超出了容器的高度，那么用户就需要通过滚动来查看剩余的内容）。

用法：

const elem = document.getElementById('foo');
const scrollHeight = elem.scrollHeight;

示例：

当我们需要自适应地设置一个可滚动区域的高度，以确保所有内容都能显示，则可以使用 scrollHeight：

<div id="scrollable" style="max-height: 200px; overflow-y: scroll;">
  <p>Scroll me...</p>
  <p>Keep scrolling...</p>
  <p>Keep scrolling...</p>
  <p>Keep scrolling...</p>
  <p>Keep scrolling...</p>
  <p>Keep scrolling...</p>
  <p>Stop scrolling!</p>
</div>

const scrollable = document.getElementById('scrollable');
scrollable.style.height = scrollable.scrollHeight + 'px';

这里我们将 scrollable 元素的高度设置为 scrollHeight 的值，以确保所有内容都能显示。

总结一下，scrollTop、clientHeight、scrollHeight 三个属性是对于滚动机制中的不同参数的表示，它们能够帮助我们更方便地管理滚动。