web-dev-qa-db-ger.com

IE8 Alternative zu window.scrollY?

Ich versuche festzustellen, wie viele Pixel ich mit window.scrollY gescrollt habe. Dies wird jedoch in IE8 nicht unterstützt. Was ist die sichere, browserübergreifende Alternative?

javascripthtmlinternet-explorer-8cross-browser
39
Jake Wilson

Die Browser-kompatible Version für window.scrollY ist document.documentElement.scrollTop. Eine vollständige, ausführliche Problemumgehung in IE8 und zuvor finden Sie im Abschnitt "Hinweise" in dieser Mozilla-Dokumentation .

Wie bereits erwähnt, ist , pageYOffset eine weitere Alternative zu window.scrollY (beachten Sie, dass dies nur IE9 + -kompatibel ist). 

In Bezug auf den Link oben, überprüfen Sie Example 4 auf eine vollständig kompatible Methode, um die Bildlaufposition abzurufen (dabei wird sogar der Zoom als @adeneo erwähnt!) Mit document.documentElement.scrollTop und document.documentElement.scrollLeft verwendet. 

Hier kannst du das Beispiel selbst ausprobieren!

96
lifetimes

Wenn Sie es nicht häufig verwenden müssen, tun Sie einfach: 

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

Wenn Sie jQuery verwenden, habe ich $ (window) .scrollTop () verwendet, um die Y-Position in IE 8 zu ermitteln. Es schien zu funktionieren.

4
Daniel

Wenn Sie einen triftigen Grund dafür haben, nicht nur eine Bibliothek für diese Art von Basisfunktionalität zu verwenden, zögern Sie nicht, das Rad nicht neu zu erfinden.

Mootools ist Open Source , und Sie können einfach die Implementierung und relevante Ausschnitte "stehlen":

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

Diese 2 sind der Kern für die Entscheidung, welchen Kompatibilitätsmodus Ihr aktueller Browser hat, und dann, ob Sie window.pageYOffset oder document.body.scrollTop basierend auf diesem oder sogar document.html.scrollTop für wirklich alte fehlerhafte Browser verwenden.

3
Niels Keurentjes

Basierend auf Mozilla und den obigen Antworten habe ich die folgenden Funktionen erstellt, um die Koordinaten besser zu ermitteln:

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

Gemäß der Mozilla-Dokumentation , wie oben in Lebenszeiten zitiert, ist die pageXOffset-Eigenschaft ein Alias ​​für die scrollX-Eigenschaft. Daher ist dies streng genommen nicht erforderlich.

Jedenfalls ist die Verwendung:

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

Getestet und funktioniert auf Chrome, Firefox, Opera, Edge (8-Edge), IE (7-11), IE8 unter XP

1
Dev Ops

Basierend auf der Antwort von Niels habe ich eine etwas kompaktere Lösung, wenn nur die Y-Koordinate benötigt wird:

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

window.scrollY & window.scrollX funktioniert gut in allen modernen Browsern wie (Chrome, FireFox & Safari), funktioniert aber nicht in IE, um die Verwendung von window.pageXOffset oder window.pageYOffset zu beheben.

Hier ist ein Beispielcode, den ich geschrieben habe, um das Problem zu beheben, sodass das programmatische Scrollen in allen Browsern einschließlich IE funktioniert

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

In eckig verwenden wir:

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