Utilice document.scrollingElement para controlar la altura de desplazamiento del formulario

1. ¿Por qué hay document.scrollingElement?

Si es solo para obtener la altura de desplazamiento del formulario de la página web actual, utilícelo directamente window.pageYOffset(IE9 +), se admiten tanto terminales de escritorio como móviles.

Pero window.pageYOffsetes una propiedad de solo lectura y no podemos usarla para establecer la altura de desplazamiento del formulario.En este momento, debemos encontrar el elemento de desplazamiento correspondiente y scrollTopcambiar la posición de desplazamiento del formulario estableciendo el valor.

Entonces, los elementos de desplazamiento del formulario en el escritorio y el móvil son diferentes, el siguiente código de prueba:

document.documentElement.scrollTop; 
document.body.scrollTop;

Si está interesado, puede escanear el código QR a continuación para probarlo usted mismo:

O visite esta página directamente: la demostración de prueba del contenedor donde se encuentra la altura de desplazamiento del formulario

El resultado es este en la PC:

Y al teléfono:

• El navegador del escritorio document.body.scrollTopsiempre es 0, lo que indica que el elemento de desplazamiento en el escritorio es document.documentElement;
• El terminal móvil es document.documentElement.scrollTopsiempre 0, lo que indica que el elemento de desplazamiento en el terminal móvil es document.body;

Se puede ver que los elementos de desplazamiento son diferentes en diferentes plataformas, por lo que existen problemas de compatibilidad.

Por ejemplo, para lograr un efecto de retorno al tope, nuestro enfoque actual es equiparar las siguientes dos declaraciones:

document.documentElement.scrollTop = 0; 
document.body.scrollTop = 0;

Parece muy largo, es precisamente por este statu quo que document.scrollingElementeste atributo surgió, identificando directa y dinámicamente el contenedor rodante.

document.scrollingElement domina el mundo

• En el lado del escritorio document.scrollingElementestá document.documentElement;
• En el terminal móvil document.scrollingElementlo es document.body.

Puede identificar automáticamente contenedores rodantes en diferentes plataformas.

Entonces, cuando queremos que la página se desplace a una ubicación específica, como 400 píxeles, se puede hacer una línea de código directamente:

document.scrollingElement.scrollTop = 400;

La semántica es mejor, el código es más simplificado y el método antiguo puede decir adiós directamente.

Puede escanear el código QR a continuación para probarlo usted mismo:

O visite esta página directamente: document.scrollingElement prueba de demostración

Haga clic en el botón y podrá ver que tanto el acceso para PC como para dispositivos móviles se han desplazado a la posición de 400 píxeles.

document.scrollingElement.tagNameLos valores de salida al mismo tiempo son HTML(navegador de escritorio) y BODY(navegador móvil, como WeChat).

compatibilidad

Sigue siendo bastante bueno. Es seguro de usar en el terminal móvil. Se admiten Android 5 y versiones posteriores. Sin embargo, IE se está desacelerando.

Si no le preocupa algún equipo antiguo, puede utilizar Polyfill: https://github.com/mathiasbynens/document.scrollingElement

Simplemente introduzca un scrollingelement.js, un pequeño fragmento de código puede ser compatible con la siguiente versión:

<script src = "scrollingelement.js"> </script>

• Cromo
• Opera 11.64+
• Firefox 3.5+
• Internet Explorer 8+
• Safari 8+

2. Conclusión

Cuando tenga la necesidad de controlar la altura de desplazamiento del formulario en el futuro, no dude en utilizar document.scrollingElement.