JQuery: как определить, что div прокручивается вниз

Question

У меня есть div с определенной высотой, и overflow:scroll;. Его содержимое слишком длинное, поэтому появляются полосы прокрутки.

Теперь по поводу ихти. Часть его внутреннего HTML странным образом появляется все время (точнее, нижний колонтитул таблицы, сгенерированный плагином tableFilter). Я бы хотел, чтобы этот нижний колонтитул исчез, когда он не нужен (на самом деле он появляется за пределами границы <div>). Я решил заставить его исчезнуть, но установил z-index на -1000. Но я хочу, чтобы он появился, когда содержащий <div> полностью прокручивается вниз.

Как узнать, что пользователь прокрутил внизу?

---

Используя справку из приведенных ниже ответов, я использовал атрибут scrollTop, но разница между scrollTop и innerHeight заключается в размере полосы прокрутки плюс некоторая неопознанная дельта. Полоса прокрутки имеет высоту 16 пикселей в большинстве браузеров под Windows, но я получаю разницу в 17 в Firefox и примерно в 20 в IE, где границы моего <div> контента выглядят больше.

Был дан способ (фактически два способа ...) для вычисления размера полосы прокрутки там .

Answer 1

Вам необходимо сравнить высоту div с положением scrollTop и высотой элемента.

$(div).scroll(function(){ 
  if(isScrollBottom()){ 
    //scroll is at the bottom 
    //do something... 
  } 
}); 

function isScrollBottom() { 
  var elementHeight = $(element).height(); 
  var scrollPosition = $(div).height() + $(div).scrollTop(); 
  return (elementHeight == scrollPosition); 
} 

Answer 2

Вы можете узнать, прокручивается ли div, просто выполнив следующее:

 if ( div.scrollTop + div.clientHeight == div.scrollHeight ){
 //...
 }

Работает на Firefox, Chrome и IE8

Answer 3

Для получения этой информации не нужно jQuery:

element.scrollTop;

В событии прокрутки вашего DIV используйте эту информацию для проверки высоты элемента, соответствует ли он (или близок к соответствию), как вам нужно.

Answer 4

Это не ограничивается divs:

toallyScrolled = element.scrollHeight - element.scrollTop === element.clientHeight;

от MDN Element.scrollHeight . На этой странице также есть хорошее демо.

Answer 5

Я думаю, просто

$(this).scrollTop()

сделает свое дело.

Answer 6

Вам просто нужно использовать свойство scrollHeight для div вместо высоты. Функция isScrollBottom (), которую Shaun Humphries , написанная ранее, можно поставить так:

function isScrollBottom() {
var totalHeight = $("divSelector")[0].scrollHeight;
var scrollPosition = $("divSelector").height() + $("divSelector").scrollTop();
return (totalHeight == scrollPosition);
}

Answer 7

function elementInViewport(el) {
   var listcontent= $(".listContainer")[0].getBoundingClientRect();
   var rect = $(el)[0].getBoundingClientRect();
   return [( rect.top >= 0 && rect.left >= 0 && rect.bottom <=  listcontent.bottom), ( rect.bottom - listcontent.bottom )]
}