JS или JQuery - получение видимой области прокручиваемого div - PullRequest
Новая
       46

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

5 голосов
/ 12 января 2010

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 13 января 2010

Дох, разобрался

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

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
0 голосов
/ 13 января 2010

вам нужно получить scrollTop внутреннего div, добавить к нему высоту внешнего div и это даст вам видимые размеры

0 голосов
/ 13 января 2010

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

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

...