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

Question

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

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

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

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

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

Answer 1

Да, понял

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

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 можно установить относительное/абсолютное позиционирование, чтобы сделать его позиционированным.

Также вы можете изменить прокрутка вверху свойство для изменения положения прокрутки.Или jquery scrollTop(pos).

Answer 3

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