Este artículo describe el método de JS para determinar si la barra de desplazamiento ha llegado a la parte inferior o superior de la página. Compártelo para su referencia. El análisis específico es el siguiente:
A menudo vemos que muchos sitios web que regresan al máximo es que cuando desplazamos la barra a la posición especificada, volverá a la parte superior, de lo contrario se ocultará automáticamente. Permítanme presentar los principios y métodos para implementar este efecto.
Cuando el área visible es más pequeña que la altura real de la página, se determina que aparece una barra de desplazamiento, es decir:
La copia del código es la siguiente: if (document.documentelement.clientheight <document.documentelement.offsetheight) scroll = true;
Para usar document.DocumentElement, debe agregar una declaración al frente de la página:
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
De hecho, este código no funciona porque no consideró un problema, es decir, el borde del navegador. Cuando obtenemos la altura de la página, incluye el borde del navegador. El borde del navegador es de 2 píxeles, por lo que en cualquier caso ClientHeight siempre es más pequeño que OffsetHeight, lo que lo hace realidad incluso sin una barra de desplazamiento. Por lo tanto, necesitamos corregir este error. El código debe cambiarse de esta manera y reste 4 píxeles en Offsetheight, es decir:
Copie el código del código de la siguiente manera: if (document.documentelement.clientheight <document.documentelement.offsetheight-4) {
// Ejecutar scripts relacionados.
}
Además, debemos resolverlo aquí que el código anterior juzga la barra de desplazamiento horizontal. Generalmente necesitamos juzgar el pergamino vertical, el código es el siguiente:
Copie el código de la siguiente manera: if (document.documentelement.clientwidth <document.documentelement.offsetwidth-4) {
// Ejecutar scripts relacionados.
}
Para determinar si la barra de desplazamiento se ha tirado a la parte inferior de la página, puede usar el siguiente código
Copie el código de la siguiente manera: window.onscroll = function () {
var marginbot = 0;
if (document.documentelement.scrolltop) {
marginbot = document.documentelement.scrollheight (document.documentelement.scrolltop+document.body.scrolltop) -document.documentelement.clientHeight;
} demás {
marginbot = document.body.scrollheight document.body.scrolltop- document.body.clientheight;
}
if (marginbot <= 0) {
// Haz algo
}
}
Ejemplo 2
Buscándolo en línea. Muy compatible con el navegador. Curiosamente, no encontré ninguna información relevante en el documento. Publicar el código.
Copie el código de la siguiente manera:/**************************
* Tome la altura de la barra de desplazamiento de la ventana
************************/
función getScrollTop ()
{
var scrolltop = 0;
if (document.documentelement && document.documentelement.scrolltop)
{
scrolltop = document.documentelement.scrolltop;
}
else if (document.body)
{
scrolltop = document.body.scrolltop;
}
return scrolltop;
}
/****************************
* Tome la altura del rango visual de la ventana
****************************/
función getClientHeight ()
{
var clientHeight = 0;
if (document.body.clientheight && document.documentelement.clientheight)
{
var clientHeight = (document.body.clientHeight <document.documentelement.clientheight)? document.body.clientheight: document.documentelement.clientHeight;
}
demás
{
var clientHeight = (document.body.clientheight> document.documentelement.clientheight)? document.body.clientHeight: document.documentelement.clientHeight;
}
devolver clientHeight;
}
/****************************
* Tome la altura real del contenido del documento
****************************/
función getscrollheight ()
{
return math.max (document.body.scrollheight, document.documentelement.scrollheight);
}
función test () {
if (getscrollTop ()+getClientHeight () == getscrollHeight ()) {
alerta ("alcanzar el fondo");
}demás{
alerta ("no llegó al fondo");
}
}
Reponer:
DTD ha declarado:
ES DECIR
document.documentelement.scrollHeight Toda la altura de contenido del navegador, document.body.scrollHeight Toda la altura de contenido del navegador
document.documentelement.scrolltop La altura de la parte del navegador Scrolls, document.body.scrolltop es siempre 0
document.documentelement.clientHeight la altura de la parte visible del navegador, document.body.clientHeight la altura del contenido del navegador
FF
document.documentelement.scrollHeight Toda la altura de contenido del navegador, document.body.scrollHeight Toda la altura de contenido del navegador
document.documentelement.scrolltop La altura de la parte del navegador Scrolls, document.body.scrolltop es siempre 0
document.documentelement.clientHeight la altura de la parte visible del navegador, document.body.clientHeight la altura del contenido del navegador
Cromo
document.documentelement.scrollHeight Toda la altura de contenido del navegador, document.body.scrollHeight Toda la altura de contenido del navegador
document.documentelement.scrolltop es siempre 0, document.body.scrolltop navegador de navegador altura de la parte de desplazamiento
document.documentelement.clientHeight la altura de la parte visible del navegador, document.body.clientHeight la altura del contenido del navegador
Dtd no declarado:
ES DECIR
document.documentelement.scrollHeight la altura de la parte visible del navegador, document.body.scrollHeight la altura de todo el contenido del navegador
document.documentelement.scrolltop es siempre 0, document.body.scrolltop navegador de navegador altura de la parte de desplazamiento
document.documentelement.clientHeight es siempre 0, document.body.clientHeight la altura de la parte visible del navegador
FF
document.documentelement.scrollHeight la altura de la parte visible del navegador, document.body.scrollHeight la altura de todo el contenido del navegador
document.documentelement.scrolltop es siempre 0, document.body.scrolltop navegador de navegador altura de la parte de desplazamiento
document.documentelement.clientHeight la altura de todo el contenido del navegador, document.body.clientHeight la altura de la parte visible del navegador
Cromo
document.documentelement.scrollHeight la altura de la parte visible del navegador, document.body.scrollHeight la altura de todo el contenido del navegador
document.documentelement.scrolltop es siempre 0, document.body.scrolltop navegador de navegador altura de la parte de desplazamiento
document.documentelement.clientHeight la altura de todo el contenido del navegador, document.body.clientHeight la altura de la parte visible del navegador
La altura de todo el contenido del navegador es la altura de todo el marco del navegador, incluida la suma de la altura de la parte de rodadura de la barra de desplazamiento + la parte visual + la parte oculta en la parte inferior
La altura de la parte del navegador es la de la barra de desplazamiento, la parte de la altura para ver la altura de la parte superior de todo el objeto.
Después de comprender los parámetros anteriores, podemos crear un efecto de desplazamiento que sea compatible con los navegadores IE, FF y Chrome.
Espero que este artículo sea útil para la programación de JavaScript de todos.