document.body.scrollTop Firefox gibt 0 zurück: NUR JS

Irgendwelche Alternativen in reinem Javascript?

Das Folgende arbeitet in Oper, Chrom und Safari. Habe noch nicht auf Explorer getestet:

http://monkey-me.herokuapp.com

https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js

Beim Laden der Seite sollte nach unten zu div '.content' gescrollt werden:

var destiny = document.getElementsByClassName('content');
var destinyY = destiny[0].offsetTop;
scrollTo(document.body, destinyY, 200);

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
};

Versuchen Sie Folgendes : document.documentElement.scrollTop. Wenn ich richtig bin, document.body.scrollTopist veraltet.

Aktualisieren

Scheint, als würde Chrome nicht mit der Antwort mitspielen, um sicher zu gehen, wie von @Nikolai Mavrenkov in den Kommentaren vorgeschlagen:

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

Jetzt sollten alle Browser abgedeckt sein.

Anstatt IF- Bedingungen zu verwenden, gibt es eine einfachere Möglichkeit, mit so etwas wie diesem logischen Ausdruck ein korrektes Ergebnis zu erzielen.

var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

Beide Teile geben standardmäßig Null zurück. Wenn sich Ihr Bildlauf an der Nullposition befindet, wird wie erwartet Null zurückgegeben.

bodyScrollTop = 0 || 0 = 0

Beim Blättern auf der Seite gibt einer dieser Teile Null zurück und ein anderer eine Zahl größer als Null. Der Wert Null wird als falsch ausgewertet, und dann nimmt das logische ODER || einen anderen Wert als Ergebnis an (z. B. Ihr erwartetes scrollTop ist 300 ).

Firefox-ähnliche Browser sehen diesen Ausdruck als

bodyScrollTop = 300 || 0 = 300

und der Rest der Browser sehen

bodyScrollTop = 0 || 300 = 300

was wiederum das gleiche und korrekte Ergebnis liefert.

In der Tat dreht sich alles um something || nothing = something:)

Der Standard ist document.documentElementund dies wird von FF und IE verwendet.

WebKit verwendet document.bodyden Standard und konnte ihn aufgrund von Beschwerden über die Abwärtskompatibilität nicht verwenden, wenn sie zum Standard geändert wurden. In diesem Beitrag wird dies ausführlich erläutert

https://miketaylr.com/posts/2014/11/document-body-scrolltop.html

Es gibt eine neue Eigenschaft im Dokument, die WebKit jetzt unterstützt

https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement

So gelangen Sie zum richtigen Element

var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;

und es gibt auch eine Polyfüllung

https://github.com/mathiasbynens/document.scrollingElement