Javascript 获取使用父div的overflow:hidden属性隐藏的元素的位置

qtn：获取使用父div的overflow:hidden属性隐藏的元素的位置

例如：项目-1、项目-2、项目-3下面的每个项目都有显示块属性和一些宽度（以百分比表示），以了解偏移位置/或检测窗口大小调整时隐藏的div。显示：无属性不应用于隐藏项，因为它们被父div的溢出隐藏属性隐藏。请注意布局是响应的

<div class="parent" style="width:100px; overflow:hidden;">
<ul>
<li>
 <div class="item-1">item1</div>
 <div class="item-2">item2</div>
 <div class="item-3">item3</div>
</li>
</ul>
</div>

项目1
项目2
项目3

这可能会满足您的需求：

console.log($(".item-3").position());

---

好的，对于这个问题，您需要找出元素在DOM中的位置是否可见。我们将分三个步骤来完成

查找元素在dom上的位置

在dom上的该位置查找元素

检查该元素是否为原始元素

为了找到DOM上元素的X，Y位置，我从另一个stackoverflow answer（）借用并修改了这个函数：

好的，要在DOM中找到该位置的元素，我们将使用

document.elementFromPoint(x,y)

幸运的是，这将返回最上面的元素，即可见元素。 最后，我们要确保元素与我们正在检查的元素等价。我们可以将所有这些都封装在一个漂亮的大功能中

function isVisible(element){

    var getOffset = function( el ) {
            var _x = 0;
            var _y = 0;
            while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
                    _x += el.offsetLeft - el.scrollLeft;
                    _y += el.offsetTop - el.scrollTop;
                    el = el.offsetParent;
            }
            return { y: _y, x: _x };
    }
    var _pos = getOffset(element); 

    var _topElement = document.elementFromPoint(_pos.x,_pos.y);

    //Returns a boolean of whether this is this the same element?
    return _topElement == element;
}

此函数将告诉我们元素是否可见。我们可以通过html集合对其进行原型过滤，以查看元素是否可见

[].filter.call(document.getElementsByClassName('my_thingy'),(thing) => (!isVisible(thing)));

---

这将返回一个数组，其中包含所有不可见的元素类型。谢谢你的阅读，我希望我能帮上忙。

谢谢你花时间回答并解释得这么好……我想应该会有帮助的。我试试这个。没问题，告诉我怎么回事。该死的，你在哪里？

[].filter.call(document.getElementsByClassName('my_thingy'),(thing) => (!isVisible(thing)));