Debe comprender tres elementos DOM, a saber: ClientHeight, OffsetHeight, Scrolltop.
ClientHeight: la altura de este elemento ocupa la altura de todo el espacio. Por lo tanto, si un DIV tiene una barra de desplazamiento, esa altura no incluye el contenido de la siguiente parte que la barra de desplazamiento no muestra. Y es solo el colmo de Div.
Offsetheight: se refiere a la altura del contenido del elemento. Según lo anterior, esta altura es la altura dentro del DIV, incluida la parte visible y la parte invisible debajo de la barra de desplazamiento.
Scrolltop: ¿Qué es esto? Se puede entender como la longitud de la barra de desplazamiento que se puede desplazar.
Por ejemplo, si una altura DIV es de 400 px (es decir, ClientHeight es 400), y el contenido en el interior es una lista muy larga, y la altura del contenido es de 1000px (es decir, OffsetHeight es 1000). Entonces, en la parte visible, vemos que el contenido de 400px y 1000px sigue siendo invisible de 600px. Y esta parte invisible es lo que podemos mostrar tirando de la barra de desplazamiento. Si la barra de desplazamiento no tira, el Scrolltop es 0 en este momento. Si tira de la barra de desplazamiento a la parte inferior, se mostrará la parte inferior de la lista. En este momento, el cementerio de desplazamiento es 600. Por lo tanto, el intervalo de valor de ScrollTop es [0, 600]. Por lo tanto, este 600 puede entenderse como la longitud de la barra de desplazamiento que puede desplazarse.
Después de comprender el concepto anterior. Es fácil saber si se desplaza hasta el fondo.
Primero, tiramos de la barra de desplazamiento, tiramos de la parte superior a la parte inferior, y el cambio es el valor de Scrolltop, y este valor tiene un intervalo.
Este intervalo es: [0, (Offsetheight - ClientHeight)]
Es decir, todo el proceso de barra de desplazamiento de cambios en el rango de 0 a (offsetheight ClientHeight).
1. Juicio El Scrollbar se desplaza hacia abajo: ScrollTop == (OffsetHeight ClientHeight)
2. Dentro de los 50 px del extremo inferior de la barra de desplazamiento: (OffsetHeight ClientHeight) Scrolltop <= 50
3. Dentro del 5% de la distancia de la barra de desplazamiento desde la parte inferior: scrolltop / (offsetheight clientHeight)> = 0.95
Como arriba.
Si desea llegar a la parte inferior, cargue automáticamente el contenido. Simplemente registre un evento de barra de desplazamiento:
La copia del código es la siguiente:
scrollbottomTest = function () {
$ ("#contener"). scroll (function () {
var $ this = $ (this),
verh = $ (this) .Height (), // altura visible
contenth = $ (this) .get (0) .scrollheight, // altura de contenido
scrollTop = $ (this) .scrolltop (); // altura de desplazamiento
// if (contenth - verh - scrolltop <= 100) {// Al alcanzar el inferior 100px, cargar contenido nuevo
if (scrolltop/(contenth -viewh)> = 0.95) {// Al alcanzar la inferior 100px, cargue nuevo contenido
// Cargue los datos aquí.
}
});
}
PD: Aquí recomiendo una herramienta de consulta en línea sobre eventos JS, que resume los tipos de eventos y funciones de funciones de JS de uso común:
Una lista completa de eventos y funciones de JavaScript:
http://tools.vevb.com/table/javascript_event