js o Jquery - ottenendo l'area visualizzabile del div scorrevole

Question

Attualmente ho un div scorrevole che viene popolato dinamicamente.
Ho una funzione che cattura Freccia su e Freccia giù tasti premuti e cambia le classi all'interno del div genitore di avere un bambino selezionato all'ora (fondamentalmente questo imita una selezione ingresso)

Ecco quello che voglio fare: Ho bisogno di cambiare l'area visibile della div (andare giù o su) per mostrare il bambino "selezionato" più recente, ma solo se quel bambino non è già nell'area visibile del genitore.

Così ho bisogno di ottenere l'area visualizzabile in relazione alla scrollHeight del div genitore in qualche modo ... ma non sono sicuro come fare questo ...

Inoltre, non sono sicuro come impostare l'area visibile del div genitore

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Doh, capito

In primo luogo ho l'area visibile tramite

var viewableTop = $("#parentDiv").scrollTop; 
var viewableBottom = $("#parentDiv").innerHeight() + $("#parentDiv").scrollTop; 

quindi è possibile visualizzare qualsiasi elemento tra viewable Top e viewableBottom. Ma davvero non hai bisogno di saperlo. Invece è necessario conoscere le seguenti

//getting child position within the parent 
var childPos = $("#childDiv").position().top; 
//getting difference between the childs top and parents viewable area 
var yDiff = ($("#childDiv").position().top + $("#childDiv").outerHeight()) - $("#parentDiv").innerHeight() 

poi

//if upArrow and childPosition is above viewable area (that's why it goes negative) 
if(event.keyCode == 38 && childPos < 0) 
    $("#parentDiv").scrollTop += childPos;//add the negative number to the scrollTop 
//if downArrow and the difference between childs top and parents viewable area is greater than the height of a childDiv 
else if(event.keyCode == 40 && yDiff > $("#childDiv").outerHeight()-1) 
    $("#parentDiv").scrollTop += yDiff;//add the difference to the parents scrollTop 

Answer 2

Se si utilizza jQuery, è possibile ottenere la posizione di un elemento in relazione al genitore posizionato utilizzando position(). Il div scorrevole può essere impostato su posizionamento relativo/assoluto per posizionarlo.

Inoltre, è possibile modificare la proprietà scrollTop per modificare la posizione di scorrimento. Oppure jquery scrollTop(pos).

Answer 3

è necessario per ottenere scrollTop del div interno, aggiungere altezza outter del div a questo e che vi darà le dimensioni visualizzabili