js o jQuery - la obtención de área visible de la div desplazable

Question

Actualmente tengo un un div desplazable que se rellena de forma dinámica.
Tengo una función que captura las pulsaciones de teclas Flecha arriba y DownArrow y cambia las clases dentro del div padre tener un hijo seleccionado a la vez (Básicamente esto imita una selección de entrada)

Esto es lo que quiero hacer: Necesito área visible de la div a cambiar (ir hacia arriba o abajo) para mostrar al niño más recientemente "seleccionado", pero sólo si ese niño no está ya en el área visible de la matriz.

Así que necesito para obtener el área visible en relación con el scrollHeight de la div padre de alguna manera ... pero no estoy seguro de cómo hacer esto ...

Además, no estoy seguro de cómo configurar el área visible de la div padre.

Cualquier ayuda sería muy apreciada!

Answer 1

Doh, lo descubrió

En primer lugar consigo el área visible a través de

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

así que cualquier cosa entre el viewableTop y viewableBottom es visible. Pero en realidad no es necesario saber que. En su lugar lo que necesita saber lo siguiente

//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()

entonces

//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

Si está utilizando jQuery, se puede obtener la posición de un elemento con respecto a él es posicionado de los padres mediante el uso de position(). El div desplazable se puede configurar para posicionamiento relativo / absoluto para que sea posicionado.

Además, puede cambiar scrollTop propiedad para cambiar la posición de desplazamiento. O jQuery scrollTop(pos).

Answer 3

que necesita para obtener el interior div scrollTop, agregar altura div externa a eso y que le dará las dimensiones visibles