javascript - section - IE8 alternativa a window.scrollY?

section html

Question

Estoy intentando determinar cuántos píxeles abajo he desplazado usando window.scrollY . Pero esto no es compatible con IE8. ¿Cuál es la alternativa segura y entre navegadores?

Answer 1

La versión compatible con window.scrollY navegadores para window.scrollY es document.documentElement.scrollTop . Consulte la sección ''Notas'' de este documento de Mozilla para obtener una solución completa y detallada en IE8 y versiones anteriores.

Como se mencionó aquí , pageYOffset es otra alternativa a window.scrollY (tenga en cuenta que esto es solo IE9 + compatible).

Con respecto al enlace anterior, consulte el Ejemplo 4 para obtener una forma totalmente compatible de obtener la posición de desplazamiento (¡incluso representa el zoom como se menciona @adeneo!) Utilizando document.documentElement.scrollTop y document.documentElement.scrollLeft .

¡Aquí, prueba el ejemplo por ti mismo!

Answer 2

Si tiene una razón válida para no solo usar una biblioteca para manejar este tipo de funcionalidad básica, no dude en "no volver a inventar la rueda".

Mootools es de código abierto , y usted puede simplemente ''robar'' su implementación, fragmentos relevantes:

getScroll: function(){
var win = this.getWindow(), doc = getCompatElement(this);
return {x: win.pageXOffset || doc.scrollLeft, y: win.pageYOffset || doc.scrollTop};
}
function getCompatElement(element){
var doc = element.getDocument();
return (!doc.compatMode || doc.compatMode == ''CSS1Compat'') ? doc.html : doc.body;
}

Estos 2 son el núcleo de decidir qué modo de compatibilidad tiene su navegador actual, y luego si usar window.pageYOffset o document.body.scrollTop basado en eso o incluso document.html.scrollTop para navegadores con errores realmente antiguos.

Answer 3

Si está usando jQuery, usé $ (window) .scrollTop () para obtener la posición Y en IE 8. Pareció funcionar.

Answer 4

Basándome en la respuesta de Niels, se me ocurre una solución un poco más compacta cuando solo se necesita la coordinada Y:

function get_scroll_y() {
return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}

Answer 5

Si no tiene que usarlo mucho, solo haga lo siguiente:

var scroll =
window.scrollY //Modern Way (Chrome, Firefox)
|| window.pageYOffset (Modern IE, including IE11
|| document.documentElement.scrollTop (Old IE, 6,7,8)

Answer 6

En angular, usamos:

 var windowEl = angular.element($window);
scrolldist = windowEl.scrollTop();

Answer 7

Basado en Mozilla, y las respuestas anteriores, he creado las siguientes funciones para obtener más fácilmente las coordenadas:

var windowEl = (function () {
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
function scroll() {
return { left: scrollLeft, top: scrollTop };
};
function scrollLeft() {
return window.scrollX || window.pageXOffset || (isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft);
};
function scrollTop() {
return window.scrollY || window.pageYOffset || (isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop);
};
return {
scroll: scroll,
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
})();

De acuerdo con la documentación de Mozilla , tal como se cita en los pageXOffset vida anteriores, la propiedad de pageXOffset es un alias para la propiedad scrollX , por lo que no es estrictamente necesario.

Anyhoo, el uso es:

var scroll = windowEl.scroll();
// use scroll.left for the left scroll offset
// use scroll.top for the top scroll offset
var scrollLeft = windowEl.scrollLeft();
// the left scroll offset
var scrollTop = windowEl.scrollTop();
// the top scroll offset

Probado y funciona en Chrome, Firefox, Opera, Edge (8-Edge), IE (7-11), IE8 en XP