die Position eines Elements erhalten, das Überlauf versteckt verwendet: versteckt Eigenschaft des übergeordneten div

Question

qtn: die Position eines Elements erhalten, das Überlauf mit verborgen ist: versteckt Eigenschaft des übergeordneten div

zB: jeder er Unter Punkt 1, Punkt 2, Punkt 3 haben Sie eine Anzeige-Block-Eigenschaft und eine gewisse Breite in Prozent und wissen, um welche Offset-Position es sich handelt, oder um die auf der Fenster-Größenänderung verborgenen divs zu erkennen. Anzeige: Keine Eigenschaft wird nicht auf die ausgeblendeten Elemente angewendet, da sie durch die versteckte Überlaufeigenschaft des übergeordneten Elements verborgen sind. Bitte beachten Sie, dass das Layout ansprechend ist.

<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

Dies könnten Sie, was Sie benötigen: Sie heraus, ob das Element

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

Answer 2

Okay, gut für diese Frage müssen Sie gehen zu finden, ist das ein sichtbar an seinem Standort in dem DOM . Wir werden dies in 3 tun Schritte

1. Suchen Sie den Speicherort des Elements auf dem dom
2. Finden Sie das Element an dieser Stelle auf dem dom
3. Überprüfen Sie, ob das Element unserer ursprünglichen Element

Um die X, Y-Position des Elements auf dem DOM findet ich geändert nur geliehen und diese Funktion von einer anderen Stackoverflow Antwort (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 }; 
} 

Okay, an dieser Stelle in dem DOM das Element finden wir

document.elementFromPoint(x,y) 

Glücklicherweise diese gibt das oberste Element, das heißt die sichtbaren verwenden werden. Schließlich stellen wir sicher, dass das Element dem entspricht, das wir überprüfen. Wir können all das in einer einzigen, schönen, großen Funktion zusammenfassen.

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; 
} 

Diese Funktion sagt uns, ob das Element sichtbar ist oder nicht. Wir können nur prototypisch filtern dies durch eine HTML-Sammlung zu sehen, ob das Element sichtbar ist oder nicht

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

, die ein Array von all dieser Art von Elemente zurück, die nicht sichtbar ist. Danke fürs Lesen, ich hoffe ich habe geholfen.