js or Jquery - obtaining viewable area of scrollable div

Question

I currently have a a scrollable div that is populated dynamically.
I have a function that captures UpArrow and DownArrow keyPresses and changes the classes within the parent div to have one child selected at a time (basically this mimics a select input)

Here is what I want to do: I need the div's viewable area to change (go down or up) to show the most recently "selected" child, but only if that child is not already in the viewable area of the parent.

So I need to obtain the viewable area in relation to the scrollHeight of the parent div somehow...but i am not sure how to do this...

Also, I am not sure how to set the viewable area of the parent div.

Any help would be greatly appreciated!

Answer 1

Doh, figured it out

First I get the viewable area via

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

so anything between the viewableTop and viewableBottom is viewable. But really you don't need to know that. Instead you need to know the following

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

then

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

If you are using jQuery, you can get the position of an element relative to it's positioned parent by using position(). The scrollable div can be set to relative/absolute positioning to make it positioned.

Also, you can change scrollTop property to change the scroll position. Or jquery scrollTop(pos).

Answer 3

you need to get the inner div's scrollTop, add outter div's height to that and that will give you the viewable dimensions