如何判斷元素是否在可視區域內--getBoundingClientRect

介紹

Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。

根據MDN文檔 getBoundingClientRect 方法返回的是一個DOMRect對象

DOMRect 對象包含了一組用於描述邊框的只讀屬性left、top、right、bottom、x、y以及width、height，單位為像素。

屬性	描述
bottom	Y 軸，相對於視口原點（viewport origin）矩形盒子的底部。只讀。
height	矩形盒子的高度（等同於 bottom 減 top）。只讀。
left	X 軸，相對於視口原點（viewport origin）矩形盒子的左側。只讀。
right	X 軸，相對於視口原點（viewport origin）矩形盒子的右側。只讀。
top	Y 軸，相對於視口原點（viewport origin）矩形盒子的頂部。只讀。
width	矩形盒子的寬度（等同於 right 減 left）。只讀。
x	X 軸，相對於視口原點（viewport origin）矩形盒子的左側。只讀。
y	Y 軸，相對於視口原點（viewport origin）矩形盒子的頂部。只讀。

除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。

該對象的width和 height 值包含元素的 border 和 padding。


getBoundingClientRect會受到transform的影響。比如你的元素設置了transform:scale(2), 那么getBoundingClientRect返回的width會是元素實際寬度的2倍, top等位置信息也會因為元素尺寸變化而發生變化.


元素的offsetWidth包含 border、 padding、content的寬度。
元素的clientWidth僅包含元素的 padding、content的寬度。

判斷元素是否在視窗內

根據該對象返回值可以通過以下條件判斷元素是否在可視范圍內:

當 DOMRect.top 小於視口高度 且 DOmRect.bottom 大於0

當 DOMRect.left 小於視口寬度 且 DOmRect.right 大於0

function elementInView(element) {
  const rect = element.getBoundingClientRect()

  const yInView = rect.top < window.innerHeight && rect.bottom > 0

  const xInView = rect.left < window.innerWidth && rect.right > 0

  return yInView && xInView
}

window.inner[Width|Height] 在Chrome、Firefox下均不包含滾動條，而Edge、IE瀏覽器下則包含滾動條