web-dev-qa-db-fra.com

document.body.scrollTop Firefox renvoie 0: UNIQUEMENT JS

Des alternatives en javascript pur?

Ce qui suit fonctionne dans opera, chrome et safari. Je n’ai pas encore testé sur Explorer:

http://monkey-me.herokuapp.com

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

Au chargement de la page devrait faire défiler jusqu'à div '.content':

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);
};
javascriptfirefoxcross-browser
65
Al Ex Tsm

Essayez d'utiliser ceci: document.documentElement.scrollTop. Si j'ai raison document.body.scrollTop est obsolète.

Mise à jour

On dirait que Chrome ne joue pas avec la réponse. Pour être sûr de l'utiliser comme suggéré par @Nikolai Mavrenkov dans les commentaires:

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

Maintenant, tous les navigateurs devraient être couverts.

138
Michelangelo

Au lieu d'utiliser SI , il existe un moyen plus simple d'obtenir un résultat correct en utilisant quelque chose comme cette expression logique.

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

Les deux parties renvoient zéro par défaut. Ainsi, lorsque votre parchemin est à la position zéro, il retournera zéro comme prévu.

bodyScrollTop = 0 || 0 = 0

Sur la page-scroll, une de ces parties retournera zéro et une autre retournera un nombre supérieur à zéro. La valeur zéro est évaluée à false puis logique OU || prendra une autre valeur comme résultat (par exemple, votre attendu scrollTop est ).

Les navigateurs de type Firefox verront cette expression comme

bodyScrollTop = 300 || 0 = 300

et le reste des navigateurs voir

bodyScrollTop = 0 || 300 = 300

ce qui donne encore le même et résultat correct.

En fait, il s’agit de something || nothing = something :)

40
Wh1T3h4Ck5

La norme est document.documentElement et ceci est utilisé par FF et IE.

WebKit utilise document.body et ne pouvait pas utiliser la norme à cause de plaintes concernant la compatibilité ascendante s’ils changeaient pour la norme, cet article explique joliment

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

Il existe une nouvelle propriété sur le document que WebKit prend désormais en charge

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

donc cela vous mènera au bon élément

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

et il y a aussi un polyfill

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

19
Anthony Johnston