js o Jquery: obtención del área visible de div desplazable

Question

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

Esto es lo que quiero hacer: Necesito que el área visible de div cambie (suba o baje) para mostrar el elemento "seleccionado" más reciente, pero solo si ese niño ya no se encuentra en el área visible del elemento principal.

por eso es necesario 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 del div principal

¡Cualquier ayuda sería muy apreciada!

Answer 1

Doh, descubierto

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

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

por lo que cualquier elemento entre la vista superior y visible es visible. Pero realmente no necesitas saber eso. 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() 

continuación

//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, puede obtener la posición de un elemento relativo a su posición padre usando position(). El div desplazable se puede establecer en posición relativa/absoluta para posicionarlo.

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

Answer 3

que necesita para obtener scrollTop del div interno, aumentar la altura del outter de div a eso y que le dará las dimensiones visibles