Cómo usar window.scroll en js

1. onscroll

Explicación: Un evento que se activa cuando se desplaza la barra de desplazamiento de un elemento.

El evento de desplazamiento parece estar vinculado a cualquier elemento de entidad. Los elementos de entidad aquí incluyen elementos DOM, elementos de ventana y elementos de documento.

El uso es: element.onscroll=function(){};

Cabe señalar que la barra de desplazamiento debe aparecer y la barra de desplazamiento pertenece a este elemento, por ejemplo:

1 lt; div id="wrap" style="altura: 100px; desbordamiento: automático;" gt

2 div id="inner" style="altura; : 200px; "gt; contentlt;/divgt;

3 lt;/divgt;

Porque la altura de la envoltura exterior es menor que la altura de la interior, cuando se desborda : auto está configurado Aparecerá una barra de desplazamiento. Cuando se arrastra la barra de desplazamiento, se activará el evento de desplazamiento de envoltura en lugar del evento de desplazamiento de interior Es decir, la barra de desplazamiento pertenece a envoltura y no a interior. Es importante comprender esto para scrollTop y scrollHeight que se entienden a continuación. Por el mismo motivo.

2. scrollTop

Explicación: La altura de la parte superior oculta de la barra de desplazamiento del elemento.

El atributo scrollTop solo está disponible en elementos DOM, no en ventanas/documentos.

Uso 1: Obtener valor var top = element.scrollTop; //Número de retorno, unidad de píxel

Uso 2: Establecer valor element.scrollTop = 200;

Para el ejemplo anterior, la posición de la barra de desplazamiento es wrap.scrollTop=xx; no internal.scrollTop. El motivo es el mismo que el anterior.

Problema de compatibilidad: para obtener el documento scrollTop completo, IE es document.documentElement.scrollTop, FF/CH es document.body.scrollTop.

scrollHeight

<. p>Explicación: La altura del contenido dentro de la barra de desplazamiento del elemento.

ScrollHeight es lo mismo que el atributo scrollTop. Solo está disponible en elementos DOM y no en ventana/documento.

La diferencia es que scrollHeight es de solo lectura y no se puede configurar.

Problema de compatibilidad: para obtener la altura de desplazamiento de todo el documento, se puede obtener IE/FF/CH a través de document.documentElement.scrollHeight o document.body.scrollHeight.

Además, existen scrollLeft y scrollWidth, y el principio es el mismo.

4. Acerca de window.scroll(), window.scrollBy(), window.scrollTo()

Estas tres son funciones globales, compatibles con la última versión de IE/FF/CH.

window.scroll(x, y) es permitir que la barra de desplazamiento de la ventana se desplace a las coordenadas x, y. //x es la coordenada horizontal e y es la coordenada vertical.

window.scrollBy(-x,-y) es hacer que la barra de desplazamiento de la ventana se desplace relativamente hasta una determinada coordenada, - 10 significa desplazarse 10 píxeles hacia la izquierda/arriba relativamente.

window.scrollTo(x, y) es lo mismo que window.scroll(x, y).