js или Jquery – получение видимой области прокручиваемого div
-
20-09-2019 - |
Вопрос
В настоящее время у меня есть прокручиваемый div, который заполняется динамически.
У меня есть функция, которая фиксирует Uparrow и Down Corrow Keypress и изменяет классы в родительском DIV, чтобы выбрать одного ребенка за раз (в основном это имитирует ввод выбора)
Вот что я хочу сделать:Мне нужно, чтобы видимая область div изменилась (опустилась вниз или вверх), чтобы отобразить последний «выбранный» дочерний элемент, но только если этот дочерний элемент еще не находится в видимой области родительского элемента.
Поэтому мне нужно каким-то образом получить видимую область относительно ScrollHeight родительского div... но я не уверен, как это сделать...
Кроме того, я не уверен, как установить видимую область родительского div.
Любая помощь будет принята с благодарностью!
Решение
Да, понял
Сначала я получаю видимую область через
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
Другие советы
Если вы используете jQuery, вы можете получить позицию элемента относительно его позиционированного родителя, используя position()
.Для прокручиваемого элемента div можно установить относительное/абсолютное позиционирование, чтобы сделать его позиционированным.
Также вы можете изменить прокрутка вверху свойство для изменения положения прокрутки.Или jquery scrollTop(pos)
.
вам нужно получить ScrollTop внутреннего div, добавить к нему высоту внешнего div, и это даст вам видимые размеры