Metodo cross-browser per il rilevamento dello scrollTop della finestra del browser

Question

Qual è il modo migliore per il cross-browser per rilevare lo scrollTop della finestra del browser? Preferisco non utilizzare alcuna libreria di codici precostruita perché questo è uno script molto semplice, e non ho bisogno di tutto questo peso morto.

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

a voi salvare tutti i problemi utilizzare un framework come jQuery o mootools che calcola tutti i valori in una sola riga (cross browser) in MooTools sua $ ('elemento') getTop().; in jquery avrete bisogno di un plug-in chiamato dimensioni se ricordo correttamente sebbene la maggior parte delle volte anche senza un framework si possa effettivamente usare element.getScrollTop(); l'unico problema è su IE7 e sotto questo calcolo è un po 'buggy in quanto non prende il valore di posizione dell'elemento in considerazione per esempio se hai ottenuto una posizione: attributo css assoluto per quell'elemento il calcolo viene eseguito sull'elemento padre di quell'elemento

Answer 3

Se non si desidera includere un'intera libreria JavaScript, è possibile estrarre spesso i bit desiderati da uno.

Ad esempio, questo è essenzialmente come un rotolo jQuery implements cross-browser (Top | Sinistra):

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

Nota: si noterà che il codice di cui sopra contiene una variabile browserSupportsBoxModel, che non è definito. jQuery defines this aggiungendo temporaneamente un div alla pagina e quindi misurando alcuni attributi per determinare se il browser implementa correttamente il modello box. Come puoi immaginare questo flag controlla per IE. In particolare, controlla IE 6 or 7 in quirks mode. Poiché la rilevazione è piuttosto complessa, l'ho lasciata come esercizio per te ;-), supponendo che tu abbia già utilizzato browserfeaturedetection altrove nel tuo codice.

Modifica: Se non l'hai già indovinato, ti consiglio caldamente di utilizzare una libreria per questo tipo di cose. L'overhead è un piccolo prezzo da pagare per un codice robusto e a prova di futuro e chiunque sarebbe molto più produttivo con una struttura cross-browser su cui basarsi. (Al contrario di spendere infinite ore sbattendo la testa contro IE).

Answer 4

YUI 2.8.1 codice fa questo:

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

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

Penso jQuery 1.4.2 codice (un po 'tradotto per gli esseri umani) e supponendo ho capito lo fa correttamente questo:

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

Unfortunatley che estrae il valore di jQuery.support.boxModel è quasi impossibile perché si dovrebbe aggiungi un elemento figlio temporaneo nel documento e fai gli stessi test di jQuery.

Answer 5

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

Answer 6

O solo semplice come:

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

Answer 7

lo so suo stato un bel po 'che questa discussione è stata aggiornata, ma questa è una funzione che ho creato che consente agli sviluppatori per trovare l'elemento principale che in realtà gli host ha una proprietà "scrollTop" funzionante. Testato su Chrome 42 e Firefox 37 per 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 

Spero che questo utile! Saluti.

Answer 8

Sto usando window.scrollY || document.documentElement.scrollTop.

window.scrollY copre tutti i browser tranne IE.
document.documentElement.scrollTop copre IE.

Answer 9

Questo funziona bene da IE5 a IE11. Supporta anche tutti i principali nuovi browser.

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