获取使用溢出隐藏的元素的位置：父 div 的隐藏属性答案

【问题标题】：get the position of an element which is hidden using overflow:hidden property of the parent div获取使用溢出隐藏的元素的位置：父 div 的隐藏属性
【发布时间】：2016-04-30 17:52:20
【问题描述】：

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

例如：item-1、item-2、item-3 下面的每个都有 display-block 属性和一些百分比宽度，并且知道偏移位置/或检测窗口调整大小时隐藏的 div。 Display:none 属性不适用于隐藏项，因为它们被父 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

好的，对于这个问题，您将需要确定元素是否是在其在 DOM 中的位置可见的元素。我们将分 3 步完成此操作

在 dom 上查找元素的位置
在 dom 的那个位置找到元素
检查该元素是否是我们的原始元素

为了在 DOM 上找到元素的 X、Y 位置，我刚刚从另一个 stackoverflow 答案 (Retrieve the position (X,Y) of an HTML element) 借用并修改了这个函数：

function getOffset( 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 };
}

好的，在我们将要使用的 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)));

这将返回一个包含所有不可见类型元素的数组。感谢阅读，希望对您有所帮助。

【讨论】：

感谢您抽出宝贵时间回答并解释得这么好……我想它应该会有所帮助。会试试这个。
没问题，告诉我怎么回事。
该死的OP，你在哪里？

【解决方案2】：

这可能会给你你需要的东西：

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

【讨论】：