Get Höhe des Eingangs innerhalb div Scroll - Javascript

Question

Ich habe Eingänge innerhalb div Überlauf blättern. JSFIDDLE

Hier, wenn ich auf tab klicke, sollte ich in der Lage sein, die Höhe dieses Eingangs zu bekommen.

Erste Eingabe: Höhe 10px; - geklickt Tab

Zweiter Eingang: Höhe 20px;

Ich habe die Eigenschaften von activeElement

nextInput {...} [Object, HTMLInputElement] 
[Methods] {...} er 
clientTop 2 Number 
clientWidth 562 Number 
COMMENT_NODE 8 Number 
complete false Boolean   
ng339 742 Number 
nodeName "INPUT" String 
scrollHeight 46 Number 
scrollLeft 0 Number 
scrollTop 0 Number 
scrollWidth 562 Number 
selectionEnd 0 Number 
selectionStart 0 Number 
size 20 Number  
willValidate false Boolean 

Wie dies zu erreichen?

Answer 1

Um die Entfernung zu berechnen, die jedes Element von der Oberseite seiner Eltern ist, suchen Sie nach .offsetTop.

Im folgenden Beispiel, ich tun dies, indem Schleifen über getElementsByTagName():

var elements = document.getElementsByTagName('input'); 
 
for (var i = 0; i < elements.length; i++) { 
 
    elements[i].onclick = function() { 
 
    console.log(this.offsetTop); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div style="max-height:80px;overflow:auto;width:210px;"> 
 
    <input type="text" style="height:10px"> 
 
    <input type="text" style="height:20px"> 
 
    <input type="text" style="height:30px"> 
 
    <input type="text" style="height:20px"> 
 
</div>

Beachten Sie, dass .offsetTop nur auf die unmittelbare Mutter arbeitet. Wenn Sie den Abstand von einem Element höher im DOM berechnen möchten, müssen Sie alle verfügbaren Eltern durchlaufen und ihre Offsets zusammenfassen.

Hoffe, das hilft! :)

Answer 2

Um den Abstand des Elements von der Spitze des div (nach dem Bildlauf) zu berechnen, müssen Sie die Eigenschaft scrollTop des div und die offsetTop Eigenschaft des Eingabeelements verwenden. Angenommen, Sie haben einen Verweis auf diese Elemente, machen Sie die Berechnung wie folgt aus:

var currentPosition = inputElement.offsetTop - divElement.scrollTop; 

Answer 3

i Lösung bekam @Matarishvan

hier mein Code Sie müssen nur Fokus Ereignis verwenden und holen Höhe dieses Elements

<div > 
    <form> 
     <input type="text" placeholder="first input"></input> 
     <input id="secondtext" type="text" placeholder="second text"></input> 
    </form> 
</div> 

<script> 

$(document).ready(function() { 
    $("input").hover(function(){ 
     var val = $(this).height(); 
     console.log(val); 
    }); 
}) 
</script>