Есть ли способ проверить нижнюю часть дочернего div?

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь реализовать бесконечную прокрутку.

Но не объект window, целью является дочерний div со скроллером.

Есть ли способ проверить текущую высоту дочернего div с помощью JavaScript?

Например, я хотел бы запросить событие, когда прокрутка коснется конца.

Это мой код шаблона.

 <div
          style="overflow-y: scroll; height:500px;"
          class="scroll-content"
          @scroll="onScroll"
>

1. обычно это так же просто, как вызвать xxx.addEventListener('scroll', myFunc); элемент, для которого вы хотите получить события прокрутки

2. @ControlAltDel Спасибо за ваш ответ. При использовании в обычных объектах window параметры события использовались для сравнения высоты окна, чтобы проверить, было ли оно последним. Но в таких случаях, как subdiv, я не знал, какой фактор использовать, поэтому я оставил вопрос.

Ответ №1:

Вот пример:

 var listElm = document.querySelector('#infinite-list');

// Add items.
var nextItem = 1;
var loadMore = function() {
  for (var i = 0; i < 10; i  ) {
    var item = document.createElement('li');
    item.innerText = 'Item '   nextItem  ;
    listElm.appendChild(item);
  }
}

// Detect when scrolled to bottom.
listElm.addEventListener('scroll', function() {
  if (listElm.scrollTop   listElm.clientHeight >= listElm.scrollHeight) {
    loadMore();
  }
});

// Initially load some items.
loadMore();

 #infinite-list {
  /* We need to limit the height and show a scrollbar */
  width: 200px;
  height: 100px;
  overflow: auto;

  /* Optional, only to check that it works with margin/padding */
  margin: 30px;
  padding: 20px;
  border: 10px solid black;
}

/* Optional eye candy below: */
li {
  padding: 10px;
  list-style-type: none;
}
li:hover {
  background: #ccc;
}

 <ul id='infinite-list'>
</ul>

Ответ №2:

Следующая функция возвращает, прокручивал ли пользователь до нижней части определенного элемента:

 function scrollEnd(el) {
    return (el.scrollTop   el.offsetHeight >= el.scrollHeight);
}

Если вы добавите это в прослушиватель событий прокрутки:

 element.addEventListener('scroll', () => {
    if (scrollEnd(element)) {
        // the user reached the end
    }
})

Я попробовал это в текстовой области, хотя должно работать с чем угодно.