web-dev-qa-db-fra.com

IE8 alternative à window.scrollY?

J'essaie de déterminer le nombre de pixels que j'ai parcourus avec window.scrollY. Mais ceci n'est pas supporté dans IE8. Quelle est l'alternative sécurisée et multi-navigateur?

javascripthtmlinternet-explorer-8cross-browser
39
Jake Wilson

La version compatible entre plusieurs navigateurs pour window.scrollY est document.documentElement.scrollTop. Veuillez consulter la section 'Notes' de cette partie de Documentation de Mozilla pour une solution complète et détaillée dans IE8 et les versions antérieures.

Comme mentionné ici , pageYOffset est une autre alternative à window.scrollY (à noter que cela n'est compatible qu'avec IE9 +). 

En ce qui concerne le lien ci-dessus, consultez Exemple 4 pour obtenir un moyen totalement compatible d'obtenir la position de défilement (même pour le zoom indiqué par @adeneo!) En utilisant document.documentElement.scrollTop et document.documentElement.scrollLeft. 

Ici, essayez l'exemple par vous-même!

96
lifetimes

Si vous ne l'utilisez pas beaucoup, faites simplement: 

var scroll = window.scrollY //Modern Way (Chrome, Firefox) 
|| document.documentElement.scrollTop (Old IE, 6,7,8)
12
Tom Sarduy

Si vous utilisez jQuery, j'ai utilisé $ (window) .scrollTop () pour obtenir la position Y dans IE 8. Cela semblait fonctionner.

4
Daniel

Si vous avez une raison valable de ne pas utiliser uniquement une bibliothèque pour gérer ce type de fonctionnalité de base, n'hésitez pas à "ne pas réinventer la roue".

Mootools est open source , et vous pouvez simplement «voler» son implémentation, extraits pertinents:

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;
}

Celles-ci sont au cœur du choix du mode de compatibilité de votre navigateur actuel, puis de l’utilisation de window.pageYOffset ou document.body.scrollTop sur cette base, voire de document.html.scrollTop pour les navigateurs très anciens.

3
Niels Keurentjes

Basé sur Mozilla et les réponses ci-dessus, j’ai créé les fonctions ci-dessous pour obtenir plus facilement les coordonnées:

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
    }
})();

Selon la documentation de Mozilla , citée par vies précédentes ci-dessus, la propriété The pageXOffset est un alias de la propriété scrollX, elle n'est donc pas nécessaire.

Anyhoo, l'utilisation est:

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

Testé et fonctionne sur Chrome, Firefox, Opera, Edge (8-Edge), IE (7-11), IE8 sur XP

1
Dev Ops

Sur la base de la réponse de Niels, je propose une solution légèrement plus compacte lorsque seule la coordonnée Y est nécessaire:

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

window.scrollY & window.scrollX fonctionne bien dans tous les navigateurs modernes comme (Chrome, FireFox & Safari) mais ne fonctionne pas dans IE, donc il est préférable de corriger l'utilisation window.pageXOffset ou window.pageYOffset.

Voici un exemple de code que j'ai écrit pour résoudre le problème, de sorte que le défilement par programmation fonctionne dans tous les navigateurs, y compris IE.

if((window.scrollY || window.pageYOffset) >= 1100){
   //alert('Switch to land');
    $('#landTrst').trigger('click'); // your action goes here
}else if ((window.scrollY || window.pageYOffset) <= 900) {   
    //alert('Switch to Refernce Letter');
     $('#resLet').trigger('click'); // your action goes here
}
0
dxpkumar

En angulaire, on utilise:

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