web-dev-qa-db-fra.com

Méthode inter-navigateur pour détecter le scrollTop de la fenêtre du navigateur

Quel est le meilleur moyen de détecter le scrollTop de la fenêtre du navigateur sur plusieurs navigateurs? Je préfère ne pas utiliser de bibliothèques de code prédéfinies car il s'agit d'un script très simple et je n'ai pas besoin de tout ce poids mort.

javascriptcross-browser
62
Hot Pastrami
function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}

alert(getScrollTop())
87
kennebec

Ou simplement simple comme:

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
21
Shawn Xue

Si vous ne souhaitez pas inclure une bibliothèque JavaScript complète, vous pouvez souvent extraire les éléments de votre choix.

Par exemple, voici comment jQuery implémente un défilement multi-navigateurs (Haut | Gauche):

function getScroll(method, element) {
  // The passed in `method` value should be 'Top' or 'Left'
  method = 'scroll' + method;
  return (element == window || element == document) ? (
    self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] ||
    (browserSupportsBoxModel && document.documentElement[method]) ||
    document.body[method]
  ) : element[method];
}
getScroll('Top', element);
getScroll('Left', element);

Remarque: vous remarquerez que le code ci-dessus contient une variable browserSupportsBoxModel qui n'est pas définie. jQuery définit ceci en ajoutant temporairement un div à la page, puis en mesurant certains attributs afin de déterminer si le navigateur implémente correctement le modèle de boîte. Comme vous pouvez l’imaginer, ce drapeau vérifie la présence d’IE. Plus précisément, il vérifie IE 6 ou 7 en mode quirks . Comme la détection est assez complexe, je l’ai laissée comme exercice ;-), en supposant que vous avez déjà utilisé browserfeaturedetection ailleurs dans votre code.

Edit: Si vous n'avez pas déjà deviné, je vous suggère fortement d'utiliser une bibliothèque pour ce genre de choses. Les frais généraux représentent un faible prix à payer pour un code robuste et évolutif, et quiconque serait beaucoup plus productif grâce à une infrastructure multi-navigateurs sur laquelle s'appuyer. (Au lieu de passer d'innombrables heures à vous cogner la tête contre IE).

12
brianpeiris

J'ai utilisé window.scrollY || document.documentElement.scrollTop.

window.scrollY couvre tous les navigateurs sauf les IE.
document.documentElement.scrollTop couvre IE.

6
Jason Lydon
function getSize(method) {
  return document.documentElement[method] || document.body[method];
}
getSize("scrollTop");
5
daluege

YUI 2.8.1 code fait ceci:

function getDocumentScrollTop(doc) 
{
   doc = doc || document;

   //doc.body.scrollTop is IE quirkmode only
   return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
}

Je pense jQuery 1.4.2 code (un peu traduit pour les humains) et en supposant que je le comprenne bien fait ceci:

function getDocumentScrollTop(doc) 
{
   doc = doc || document;
   win = doc.defaultView || doc.parentWindow; //parentWindow is for IE < 9

   result = 0;
   if("pageYOffset" in win) //I'don't know why they use this, probably they tested it to be faster than doing: if(typeof win.pageYOffset !== 'undefined')
      result = win.pageYOffset;
   else
      result = (jQuery.support.boxModel && document.documentElement.scrollTop) || 
               document.body.scrollTop;

   return result;
}

Malheureusement, l'extraction de la valeur de jQuery.support.boxModel est presque impossible car vous devez ajouter un élément enfant temporaire dans le document et effectuer les mêmes tests que jQuery.

2
Marco Demaio

Je sais que cela fait un certain temps que ce fil a été mis à jour, mais cette fonction que j'ai créée permet aux développeurs de trouver l'élément racine hébergeant réellement une propriété "scrollTop" fonctionnelle. Testé sur Chrome 42 et Firefox 37 pour Mac OS X (10.9.5):

function getScrollRoot(){
    var html = document.documentElement, body = document.body,
        cacheTop = ((typeof window.pageYOffset !== "undefined") ? window.pageYOffset : null) || body.scrollTop || html.scrollTop, // cache the window's current scroll position
        root;

    html.scrollTop = body.scrollTop = cacheTop + (cacheTop > 0) ? -1 : 1;
    // find root by checking which scrollTop has a value larger than the cache.
    root = (html.scrollTop !== cacheTop) ? html : body;

    root.scrollTop = cacheTop; // restore the window's scroll position to cached value

    return root; // return the scrolling root element
}

// USAGE: when page is ready: create a global variable that calls this function.

var scrollRoot = getScrollRoot();

scrollRoot.scrollTop = 10; // set the scroll position to 10 pixels from the top
scrollRoot.scrollTop = 0; // set the scroll position to the top of the window

J'espère que vous trouvez ça utile! À votre santé.

1
ronbuck

Je crois que le meilleur moyen d'obtenir scrollTop dans les navigateurs modernes est d'utiliser

const scrollTop = document.scrollingElement.scrollTop

si cela ne fonctionne pas, vous pouvez aussi essayer 

const scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop, document.scrollingElement.scrollTop)
0
John

Pas besoin de bibliothèque supplémentaire, utilisez cet extrait:

const scrollTop = 
    (window.pageYOffset !== undefined) ? 
     window.pageYOffset :
    (document.documentElement || document.body.parentNode || document.body).scrollTop;
0
Ci Boz

Cela fonctionne bien d'IE5 à IE11. Il prend également en charge tous les nouveaux navigateurs majeurs.

var scrollTop = (document.documentElement && document.documentElement.scrollTop) ||
                (document.body.scrollTop) || (document.scrollingElement);
0
ExillustX