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