javascript - 如何使用纯 javascript 获取第一个可见的主体元素(在屏幕上)

Question

有人知道如何引用当前在可见屏幕上“最接近顶部”的 dom 元素吗？

类似这样的解决方案: How to get first visible DOM element currently showing on the screen?;但纯粹基于 javascript。

不要关心位置坐标，也不要关心其他任何东西，只要引用它即可。

提前致谢

Answer 1

这基本上是与this answer 相同的代码但没有 jQuery。

function visible(elem) {
  return !(elem.clientHeight === 0 || elem.clientWidth === 0)
}

let first;
let firstOffY;
let allVisible = Array.from(document.querySelectorAll('body > *')).filter(visible)
for(const elem of allVisible) {
  //Calculaate the offset to the document 
  //See: https://stackoverflow.com/a/18673641/7448536
  const offY = elem.getBoundingClientRect().top + document.documentElement.scrollTop
  if (first == null || offY < firstOffY) {
    first = elem;
    firstOffY = offY;
  }
}

first.classList.add('highlight');

.highlight {
  background-color: yellow;
}

<div>
  <p>Some Text</p>
  <h1>Headline</h1>
</div>

• document.querySelectorAll('body > *') 选择body下的所有元素
• Array.from 将querySelectorAll的返回值转换为真正的数组
• .filter(visible) 丢弃所有不可见的元素