如何获取溢出隐藏容器中元素的非溢出部分顶部位置？

不用遍历父元素检查overflow样式，直接用以下方法实现：

核心思路 #

利用元素的offsetParent属性——它会直接返回最近的已定位祖先元素（也就是示例里那个overflow:hidden的容器，这类裁剪容器通常都会设置relative/absolute/fixed定位，否则裁剪逻辑可能无法按预期生效）。拿到这个容器后，直接获取它相对于视口的顶部位置即可。

示例代码实现 #

针对你给出的HTML结构：

const target = document.getElementById('getMe');
// 获取容器相对于视口的顶部，即元素可见区域的顶部
const visibleTop = target.offsetParent.getBoundingClientRect().top;
console.log(visibleTop); // 预期输出50

扩展：获取相对于文档的顶部 #

如果需要的是相对于整个文档的位置，加上window.scrollY即可：

const visibleTopDoc = target.offsetParent.getBoundingClientRect().top + window.scrollY;

注意事项 #

如果你的裁剪容器没有设置定位（position: static），offsetParent会指向<body>或<html>，这种情况确实需要额外处理，但实际开发中，要实现子元素的溢出裁剪，容器几乎都会设置非static的定位，所以这个方法能覆盖绝大多数场景。

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