Cross-Browser-Methode zum Erkennen der ScrollTop des Browser-Fensters

Question

Was ist die beste Cross-Browser-Methode zum Erkennen der ScrollTop des Browser-Fensters? Ich bevorzuge es, keine vorgefertigten Codebibliotheken zu verwenden, da dies ein sehr einfaches Skript ist und ich nicht all diese Nachteile brauche.

Answer 1

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

Answer 2

Sie alle Mühe verwenden, um ein Framework wie jQuery oder Mootools zu speichern , die alle diese Werte in einer Zeile (Cross-Browser) in Mootools seine $ ('Element') GetTop() berechnet. in jquery benötigen Sie ein Plugin namens Dimensionen, wenn ich mich richtig erinnere obwohl die meiste Zeit auch ohne ein Framework können Sie tatsächlich verwenden element.getScrollTop(); um zu bekommen, was Sie brauchen das einzige Problem ist auf IE7 und unter dieser Berechnung ist etwas fehlerhaft, wie es nicht den Positionswert des Elements berücksichtigt zum Beispiel, wenn Sie eine Position: absolute CSS-Attribut für dieses Element Die Berechnung wird für das übergeordnete Element dieses Elements ausgeführt

Answer 3

Wenn Sie keine vollständige JavaScript-Bibliothek einschließen möchten, können Sie häufig die gewünschten Bits aus einem extrahieren.

Zum Beispiel ist dies im Wesentlichen wie jQuery implements ein Cross-Browser blättern (Top | links):

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

Hinweis: Sie werden bemerken, dass der obige Code enthält eine browserSupportsBoxModel Variable, die nicht definiert ist. jQuery defines this indem Sie vorübergehend ein div zu der Seite hinzufügen und dann einige Attribute messen, um festzustellen, ob der Browser das Box-Modell korrekt implementiert. Wie Sie sich vorstellen können, sucht dieses Flag nach IE. Insbesondere wird nach IE 6 or 7 in quirks mode gesucht. Da die Erkennung ziemlich komplex ist, habe ich es als Übung für Sie gelassen; vorausgesetzt, Sie haben bereits browserfeaturedetection an anderer Stelle in Ihrem Code verwendet.

Edit: Wenn Sie nicht bereits erraten haben, empfehle ich Ihnen dringend eine Bibliothek für diese Art von Dingen zu verwenden. Der Overhead ist ein geringer Preis für robusten und zukunftssicheren Code und jeder wäre mit einem browserübergreifenden Framework viel produktiver. (Im Gegensatz zu unzähligen Stunden mit dem Kopf gegen IE).

Answer 4

YUI 2.8.1 Code tut dies:

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

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

Ich denke jQuery 1.4.2 Code (etwas für die Menschen übersetzt) ​​und unter der Annahme ich verstand es richtig dies tut:

Unfortunatley den Wert von jQuery.support.boxModel extrahieren ist fast unmöglich, weil Sie müssten Fügen Sie ein temporäres untergeordnetes Element in das Dokument ein und führen Sie die gleichen Tests durch, die jQuery durchführt.

Answer 5

function getSize(method) { 
    return document.documentElement[method] || document.body[method]; 
} 
getSize("scrollTop"); 

Answer 6

Oder nur einfach wie:

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

Answer 7

ich seine schon eine Weile kennen, da dieser Thread wurde aktualisiert, aber dies ist eine Funktion habe ich, dass die Entwickler das Stammelement zu finden, die tatsächlich Hosts hat eine funktionierende Eigenschaft "scrollTop". Getestet auf Chrome 42 und Firefox 37 für 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 

Ich hoffe, Sie finden dies nützlich! Prost.

Answer 8

Ich habe window.scrollY || document.documentElement.scrollTop verwendet.

window.scrollY umfasst alle Browser außer IEs.
document.documentElement.scrollTop deckt IE ab.

Answer 9

Dies funktioniert gut von IE5 zu IE11. Es unterstützt auch alle wichtigen neuen Browser.

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