Metodo Cross-Browser per rilevare lo scrollTop della window del browser

Qual è la migliore modalità cross-browser per rilevare lo scrollTop della window del browser? Preferisco non utilizzare le librerie di codice pre-costruite perché questo è uno script molto semplice e non ho bisogno di tutto quel peso morto.

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

O semplicemente come:

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

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

Ad esempio, questo è in sostanza come jQuery implementa un browser di cross browser (Top | Left):

 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: notenetworking che il codice riportto di seguito contiene una variabile browserSupportsBoxModel non definita. jQuery lo definisce aggiungendo temporaneamente un div alla pagina e quindi misurando alcuni attributi per determinare se il browser implementa correttamente il model di casella. Come potete immaginare questa bandiera controlla per IE. In particolare, controlla per IE 6 o 7 in modalità quirks . Poiché il rilevamento è piuttosto complesso, l'ho lasciata come un'esercitazione per te ;-), supponendo che tu abbia già utilizzato la rilevazione delle funzionalità del browser altrove nel tuo codice.

Modifica: se non l'hai già immaginato, suggerisco fortemente di utilizzare una libreria per questi tipi di cose. Il sovraccarico è un piccolo prezzo da pagare per un codice robusto e futuro e chiunque sarebbe molto più produttivo con un framework cross browser per build. (Al contrario di trascorrere innumerevoli ore a battere la testa contro IE).

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

Ho usato window.scrollY || document.documentElement.scrollTop window.scrollY || document.documentElement.scrollTop .

window.scrollY copre tutti i browser, ad exception di IE.
document.documentElement.scrollTop copre IE.

Il codice YUI 2.8.1 fa questo:

 function getDocumentScrollTop(doc) { doc = doc || document; //doc.body.scrollTop is IE quirkmode only return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop); } 

Credo che il codice jQuery 1.4.2 (un po 'tradotto per gli esseri umani) e supponendo di aver capito 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 estrarre il valore di jQuery.support.boxModel è quasi imansible perché dovresti aggiungere un elemento figlio temporaneo nel documento e fare gli stessi test che jQuery fa.

So che è stato un bel po 'da quando questo thread è stato aggiornato, ma questa è una function che ho creato che consente agli sviluppatori di trovare l'elemento radice che effettivamente ospita ha una properties; "scrollTop" funzionante. Testati 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 tu lo trovi utile! Saluti.

per salvare tutti i problemi utilizzare un framework come jquery o mootools che calcola tutti questi valori in una row (cross browser) in mootools il suo $ ('element'). getTop (); in jquery avnetworking bisogno di un plugin denominato size se ricordo bene anche se per la maggior parte del tempo anche senza un framework si può effettivamente usare element.getScrollTop (); per get quello che ti serve l'unico problema è su IE7 e al di sotto di questo calcolo è un po 'buggy perché non prende in considerazione il valore di posizione dell'elemento per esempio se si ottiene una posizione: attributo assoluto css per quell'elemento il calcolo è eseguito sull'elemento principale di tale elemento