JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

在网页滚动时，我们经常需要获取或计算当前元素的滚动位置、高度、宽度等信息。JavaScript提供了几个属性来帮助我们完成这些需求。这篇学习笔记将介绍以下四个属性：scrollTop、scrollHeight、offsetTop、offsetHeight。

scrollTop

scrollTop属性是用于获取或设置元素的滚动位置。在有滚动条的情况下，如果元素没有达到滚动条的最顶部，那么该元素的scrollTop属性值就会大于0。默认情况下，scrollTop属性的值为0。如果想让元素滚动到最上方，可以将其值设为0。

以下是一个例子：

const div = document.querySelector('#myDiv');
div.scrollTop = 100; // 将#myDiv元素的滚动位置设置为100像素。

scrollHeight

scrollHeight属性是用于获取元素的滚动高度。该属性返回的值包括元素可见区域和不可见区域的高度。如果元素没有滚动条，则该属性返回的值等于元素的实际高度。

以下是一个例子：

<div id="container" style="height: 100px; overflow-y: scroll;">
  <div style="height: 200px;">Content goes here.</div>
</div>

const container = document.querySelector('#container');
console.log(container.scrollHeight); // 打印出200

offsetTop

offsetTop属性是用于获取元素的垂直偏移量。该值是指当前元素到其offsetParent元素的顶部距离，具体取决于其父元素的定位方式。

以下是一个例子：

<div id="box" style="position: relative; top: 50px;">
  <div id="child" style="position: absolute; top: 20px;">Child</div>
</div>

const box = document.querySelector('#box');
console.log(box.offsetTop); // 打印出50

const child = document.querySelector('#child');
console.log(child.offsetTop); // 打印出20

offsetHeight

offsetHeight属性是用于获取元素的完整高度，包括内容高度、内边距和边框不包括外边距。这个值一般用于计算元素的高度，判断是否发生了溢出等计算。

以下是一个例子：

<div style="height: 100px; padding: 10px; border: 1px solid #ccc;">Content goes here.</div>

const div = document.querySelector('div');
console.log(div.offsetHeight); // 打印出122（100 + 2 * 10 + 2 * 1）

结束语

以上就是JavaScript中常用的四个元素属性：scrollTop、scrollHeight、offsetTop、offsetHeight的详细讲解，了解这些属性的用处和用法，能够帮助我们更好的掌握网页的滚动效果以及元素的高度计算。

另外，建议在学习这些属性的过程中，多多动手实践，在实践中掌握更好，更加熟练地使用这些常用的元素属性。

希望这篇学习笔记对大家有所帮助！