js или Jquery - получение видимой области прокручиваемого div

Question

В настоящее время у меня есть прокручиваемый div, который заполняется динамически.
У меня есть функция, которая захватывает UpArrow и DownArrow нажатий и изменяет классы внутри родительского DIV иметь одного ребенка, выбранные в то время (в основном это имитирует отборный вход)

Вот что я хочу сделать: Мне нужна область просмотра div для изменения (спуститься или вверх), чтобы показать последнего «выбранного» ребенка, но только если этот ребенок еще не находится в видимой области родителя.

Поэтому мне нужно, чтобы получить видимую область по отношению к scrollHeight родительского DIV как-то ... но я не уверен, как это сделать ...

Кроме того, я не уверен, как установить видимую область родительского div.

Любая помощь была бы принята с благодарностью!

Answer 1

Doh, понял это

Сначала я видимую область с помощью

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

так что ничего между viewableTop и viewableBottom можно просмотреть. Но на самом деле вам не нужно это знать. Вместо этого вы должны знать следующее

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

затем

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

Если вы используете jQuery, вы можете получить положение элемента относительно его позиционированного родителя с помощью position(). Прокручиваемый div может быть установлен в относительное/абсолютное позиционирование, чтобы сделать его позиционированным.

Кроме того, вы можете изменить свойство scrollTop, чтобы изменить положение прокрутки. Или jquery scrollTop(pos).

Answer 3

вам нужно получить scrollTop внутренней Div, добавьте высоту Outter Див на что и что даст вам видимым Размеры