为何`scrollXXX`与`offsetXXX`有所不同？

DOM元素的scrollXXX与offsetXXX

在前端开发中，我们经常需要操作DOM元素的位置和滚动条。而scrollXXX和offsetXXX属性则是我们常用的两个重要属性。然而，这两个属性却经常让人感到困惑，因为它们似乎在做着相似的事情，但实际上却有所不同。

为了深入理解scrollXXX和offsetXXX之间的区别，让我们首先看看它们的定义：

• scrollXXX：scrollLeft、scrollTop等属性表示元素的滚动条位置。它们的值是元素的内容被滚动离开视口的位置。
• offsetXXX：offsetLeft、offsetTop等属性表示元素相对于其最近的定位父元素的偏移量。它们的值是元素的边框相对于父元素边框的位置。

在实际应用场景中，scrollXXX和offsetXXX的差异主要体现在以下几个方面：

1. 滚动条位置 vs. 元素偏移量： scrollXXX表示元素的滚动条位置，而offsetXXX表示元素相对于其父元素的偏移量。
2. 受滚动条影响 vs. 不受滚动条影响： scrollXXX的值会随着滚动条的滚动而改变，而offsetXXX的值不受滚动条的影响。
3. 父元素的影响： offsetXXX的值受其父元素的影响，而scrollXXX的值不受父元素的影响。

为了更好地理解scrollXXX和offsetXXX的实际应用，让我们看几个示例：

示例 1：获取元素的滚动条位置

const scrollLeft = element.scrollLeft;
const scrollTop = element.scrollTop;

示例 2：获取元素相对于父元素的偏移量

const offsetLeft = element.offsetLeft;
const offsetTop = element.offsetTop;

示例 3：滚动元素的内容

element.scrollLeft += 100;
element.scrollTop += 100;

示例 4：获取元素相对于视口的偏移量

const rect = element.getBoundingClientRect();
const offsetLeft = rect.left + window.scrollX;
const offsetTop = rect.top + window.scrollY;

在使用scrollXXX和offsetXXX时，需要考虑以下注意事项：

• scrollXXX的值可以为负数，表示元素的内容被滚动到了视口之外。
• offsetXXX的值始终为正数，表示元素的边框相对于父元素边框的位置。
• 对于没有定位的元素，offsetXXX的值相对于document.body。