Question

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

例如：他下面的项目-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>

Answer 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)));

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

Answer 2

这可能会为您提供所需：

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

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

2 个答案: