为何代码中clientY为undefined？如何监听元素到窗口顶部距离

嘿，我来帮你搞明白这个问题！你遇到的undefined问题，核心原因很直白——DOM元素本身并没有clientY这个属性！

先搞清楚clientY到底是什么 #

clientY是鼠标事件对象（比如click、mousemove这类事件的event参数）里的属性，它用来表示鼠标指针相对于浏览器视口的垂直坐标，和DOM元素本身没有关系。你直接去DOM元素上取这个属性，自然会得到undefined。

你真正需要的是什么？ #

从你的需求来看，你想要获取窗口顶部到section元素的距离，这时候应该用DOM元素的getBoundingClientRect()方法。这个方法会返回一个包含元素位置信息的DOMRect对象，里面的top属性就是元素顶部相对于视口顶部的垂直距离。

修改后的代码示例 #

把你的代码改成这样就能得到你想要的结果了：

window.addEventListener('scroll', e => {
  const sectionEl = document.querySelector('section');
  const elementRect = sectionEl.getBoundingClientRect();
  // elementRect.top 就是窗口顶部到section元素的距离
  console.log(elementRect.top);
});

额外补充：获取元素到文档顶部的绝对距离 #

如果你需要的是元素相对于整个文档顶部的绝对距离（不是相对于视口），可以把top属性加上当前页面的滚动距离window.scrollY：

const absoluteDistance = elementRect.top + window.scrollY;
console.log(absoluteDistance);

这样就能完美实现你要的滚动监听检测距离的需求啦！

内容的提问来源于stack exchange，提问作者kertAW