найти верхний и последний элемент внутри прокручиваемого div

Question

У меня есть прокручиваемый div с фиксированной высотой. При прокрутке мне нужно получить элемент в верхней части видимого окна просмотра и один элемент в нижней части окна просмотра. Я могу получить положение полосы прокрутки, используя scrollTop, однако я не уверен, как получить элемент.

Обновление: Отформатированный вопрос для наглядности.

Answer 1

Получите позицию прокрутки вашего div

var scrollY = document.getElementById("yourDiv").scrollTop;

Просмотрите элементы внутри и посмотрите на их положение

var divs = document.getElementById("yourDiv").getElementsByTagName("div");
alert(divs[0].offsetTop)

Определите, какая из них находится в позиции scrollTop, а другая в позиции scrollTop + height

Answer 2

Или вы можете попробовать использовать firstElementChild и lastElementChild:

first = document.querySelector('#your_div_id_or_selector').firstElementChild; 
first.scrollIntoView()

и для последнего элемента

last = document.querySelector('#your_div_id_or_selector').lastElementChild;
last.scrollIntoView()

Answer 3

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

Вы все равно захотите отобразить первую страницу этого материала полностью, поэтому вы создадите одну полную и отображаемую строку, спросите ее высоту и запомните это. Затем вы добавляете еще несколько текстовых строк, пока их общая высота не станет больше высоты окна. Затем добавьте не более 1990 пустых строк, чтобы размер и положение большого пальца точно отражали размер списка.

Затем, когда кто-то прокручивает ваше окно, вы можете рассчитать, какие строки должны быть видны; убери те, которые вышли из поля зрения, и собери те, которые должны быть видны. Готово! * * 1005

(думаю - я никогда не пробовал!)

Answer 4

Вы должны перебрать div, используя элементы DOM. Посмотрите здесь, я думаю, что это может быть полезным ресурсом: http://www.howtocreate.co.uk/tutorials/javascript/dombasics

С некоторыми массивами и счетчиками вы сможете получить последний элемент в вашем div.