js o Jquery - l'ottenimento di area visibile del div scorrevole

Question

Al momento ho un un div scorrevole che è popolata in modo dinamico.
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 alla volta (Fondamentalmente questo imita una selezione ingresso)

Ecco cosa voglio fare: Ho bisogno area visibile del div di cambiare (andare verso il basso o verso l'alto) per mostrare il bambino più recente "selezionato", ma solo se quel bambino non è già nell'area visualizzabile 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, io non sono sicuro di come impostare l'area visibile del div genitore.

Qualsiasi aiuto sarebbe molto apprezzato!

Answer 1

Doh, capito tutto

In primo luogo ho l'area visibile tramite

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

quindi tutto tra il viewableTop e viewableBottom è visualizzabile. Ma in realtà non c'è bisogno di sapere che. 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 sta utilizzando jQuery, è possibile ottenere la posizione di un elemento rispetto ad esso è posizionato padre utilizzando position(). Div scorrevole può essere impostato relativo / posizionamento assoluto per renderlo posizionato.

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

Answer 3

è necessario per ottenere l'interno div scrollTop, aggiungere altezza div esterno a questo e che vi darà le dimensioni visibili