从 offset, client, scroll 认识 HTMLElement 位置及滚动距离

元素定位、滚动和交互：掌握HTMLElement元素的属性

位置信息：获取元素的位置

在前端开发中，我们经常需要处理元素的位置信息，以便进行精确的元素定位、滚动和交互。HTMLElement元素提供了一系列属性，用于获取元素的各种位置信息，其中包括offset系列属性、client系列属性和scroll系列属性。

offset系列属性：相对于定位父级元素

offset系列属性用于获取元素相对于最近的定位父级元素的偏移量。定位父级元素是指具有position属性为relative、absolute或fixed的祖先元素。offset系列属性包括：

• offsetLeft： 元素左边缘相对于定位父级元素左边缘的距离。
• offsetTop： 元素上边缘相对于定位父级元素上边缘的距离。
• offsetWidth： 元素的宽度（包括内边距和边框，不包括外边距）。
• offsetHeight： 元素的高度（包括内边距和边框，不包括外边距）。

const element = document.querySelector('.element');

// 获取相对于定位父级元素的偏移量
const offsetLeft = element.offsetLeft;
const offsetTop = element.offsetTop;
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;

client系列属性：相对于视口

client系列属性用于获取元素相对于视口（文档窗口）的偏移量。client系列属性包括：

• clientLeft： 元素左边缘相对于视口左边缘的距离。
• clientTop： 元素上边缘相对于视口上边缘的距离。
• clientWidth： 元素的宽度（包括内边距和边框，不包括外边距和滚动条）。
• clientHeight： 元素的高度（包括内边距和边框，不包括外边距和滚动条）。

const element = document.querySelector('.element');

// 获取相对于视口的偏移量
const clientLeft = element.clientLeft;
const clientTop = element.clientTop;
const clientWidth = element.clientWidth;
const clientHeight = element.clientHeight;

scroll系列属性：相对于元素内容

scroll系列属性用于获取元素的滚动距离，即元素的内容相对于元素左上角的位置。scroll系列属性包括：

• scrollLeft： 元素左边缘距离元素内容左边缘的距离，即元素水平滚动距离。
• scrollTop： 元素上边缘距离元素内容上边缘的距离，即元素垂直滚动距离。
• scrollWidth： 元素内容的宽度，包括元素的实际宽度和隐藏的内容。
• scrollHeight： 元素内容的高度，包括元素的实际高度和隐藏的内容。

const element = document.querySelector('.element');

// 获取元素的滚动距离
const scrollLeft = element.scrollLeft;
const scrollTop = element.scrollTop;
const scrollWidth = element.scrollWidth;
const scrollHeight = element.scrollHeight;

属性之间的关系

offset系列属性、client系列属性和scroll系列属性之间存在着一定的联系：

• 元素的offsetLeft等于clientLeft加上元素的滚动距离scrollLeft。
• 元素的offsetTop等于clientTop加上元素的滚动距离scrollTop。
• 元素的clientWidth等于offsetWidth减去元素的滚动条宽度。
• 元素的clientHeight等于offsetHeight减去元素的滚动条高度。

结论

HTMLElement元素的offset、client和scroll相关属性非常有用，它们可以帮助我们获取元素的位置信息，以便进行元素定位、滚动和交互。我们可以在实际开发中灵活运用这些属性来实现各种功能。

常见问题解答

• 如何获取元素相对于整个文档的偏移量？
  • 使用getBoundingClientRect()方法获取元素相对于文档的边界框，然后使用left和top属性获得元素相对于文档的偏移量。
• 如何获取元素的实际宽度和高度？
  • 使用offsetWidth和offsetHeight属性获取元素的宽度和高度，其中不包括外边距。
• 如何获取元素的滚动条宽度和高度？
  • 使用clientWidth和clientHeight属性减去offsetWidth和offsetHeight属性，即可获得元素的滚动条宽度和高度。
• 如何让元素相对于视口居中？
  • 使用translate3d()或绝对定位和transform: translate(-50%, -50%)来将元素相对于视口居中。
• 如何检测元素是否可见？
  • 使用getBoundingClientRect()方法获取元素的边界框，然后检查top和bottom属性是否大于0小于视口高度。