first - jQuery: cómo determinar que un div se desplaza hacia abajo

parent jquery

Question

Tengo un div con altura definida, y overflow:scroll; . Su contenido es demasiado largo para que aparezcan las barras de desplazamiento.

Ahora para la parte de ichy. Algunos de sus HTML internos aparecen extrañamente todo el tiempo (para ser precisos, el pie de página de una tabla generada por el plugin tableFilter). Me gustaría hacer que este pie de página desaparezca cuando no sea necesario (en realidad aparece fuera del borde que contiene <div> ). Resolví hacerlo desaparecer, pero estableciendo su z-index en -1000 . Pero quiero hacer que aparezca cuando el contenido <div> está totalmente desplazado hacia abajo.

¿Cómo puedo saber que el usuario se haya desplazado hacia abajo?

Usando la ayuda de las respuestas a continuación, utilicé el atributo scrollTop pero la diferencia entre scrollTop y innerHeight es el tamaño de la barra de desplazamiento más algún delta no identificado. Una barra de desplazamiento tiene 16 píxeles de alto en la mayoría de los navegadores bajo Windows, pero obtengo una diferencia de 17 en Firefox y algo así como 20 en IE, donde los bordes de mi contenido <div> parecen hacerse más grandes.

Una forma (en realidad dos formas ...) para calcular el tamaño de la barra de desplazamiento se ha dado allí .

Answer 1

Necesita comparar la altura de div con la posición scrollTop y la altura del elemento.

$(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

No jQuery necesitaba obtener esa información:

element.scrollTop;

En un evento de desplazamiento de su DIV, use esa información para verificar la altura del elemento, si coincide (o está cerca de coincidir) haga lo que desee.

Answer 3

Puede saber si el div se desplaza hacia abajo simplemente haciendo esto:

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

Funciona en Firefox, Chrome e IE8

Answer 4

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 )]
}

Answer 5

Creo, simplemente

$(this).scrollTop()

Haría el truco.

Answer 6

Esto no está limitado a divs:

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

de MDN Element.scrollHeight . También hay una buena demostración en esa página.

Answer 7

Solo necesita usar la propiedad scrollHeight de div en lugar de height. La función isScrollBottom () que Shaun Humphries escribió anteriormente se puede poner así

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