Método de navegador cruzado para detectar el scrollTop de la ventana del navegador

Question

¿Cuál es la mejor forma de navegador para detectar el scrollTop de la ventana del navegador? Prefiero no usar ninguna biblioteca de códigos preconstruidos porque esta es una secuencia de comandos muy simple, y no necesito todo ese peso muerto.

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

para ahorrar la molestia utilizar un marco como jQuery o Mootools que calcula todos estos valores en una línea (navegadores) en su mootools $ ('elemento') getTop (.); en jquery necesitarás un complemento llamado dimensiones si recuerdo correctamente aunque la mayoría de las veces, incluso sin un marco, puedes usar element.getScrollTop(); para obtener lo que necesitará el único problema es en IE7 y debajo de este cálculo es un poco problemático ya que no toma en cuenta el valor de posición del elemento por ejemplo si obtuvo una posición: atributo css absoluto para ese elemento el cálculo se realiza en el elemento principal de ese elemento

Answer 3

Si no desea incluir una biblioteca de JavaScript completa, a menudo puede extraer los bits que desee de uno.

Por ejemplo, esto es, esencialmente, la forma jQuery implements un desplazamiento entre navegadores (Top | Izquierda):

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: se dará cuenta de que el código anterior contiene una variable browserSupportsBoxModel que es indefinido. jQuery defines this al agregar temporalmente un div a la página y luego medir algunos atributos para determinar si el navegador implementa correctamente el modelo de caja. Como se puede imaginar, esta bandera busca IE. Específicamente, comprueba el IE 6 or 7 in quirks mode. Dado que la detección es bastante compleja, la dejé como un ejercicio para usted ;-), suponiendo que ya haya usado browserfeaturedetection en otro lugar de su código.

Editar: Si no lo ha adivinado ya, le sugiero que use una biblioteca para este tipo de cosas. La sobrecarga es un precio pequeño a pagar por un código robusto y a prueba de futuro, y cualquiera sería mucho más productivo con un marco de navegador cruzado sobre el que construir. (A diferencia de pasar incontables horas golpeando tu cabeza contra IE).

Answer 4

YUI 2.8.1 código hace esto:

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

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

Creo jQuery 1.4.2 código (un poco traducido para los seres humanos) y suponiendo que entienden lo hace correctamente esto:

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

Desafortunadamente, extraer el valor de jQuery.support.boxModel es casi imposible porque tendrías que agregue un elemento secundario temporal en el documento y realice las mismas pruebas que jQuery.

Answer 5

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

Answer 6

O simplemente simple como:

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

Answer 7

Sé que es sido bastante tiempo ya que este hilo se ha actualizado, pero esta es una función que he creado que permite a los desarrolladores para encontrar el elemento raíz de que en realidad anfitriones tiene una propiedad de trabajo "scrollTop". Probado en Chrome 42 y Firefox 37 para 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 

¡Espero que le haya sido útil! Aclamaciones.

Answer 8

He estado usando window.scrollY || document.documentElement.scrollTop.

window.scrollY cubre todos los navegadores excepto IEs.
document.documentElement.scrollTop cubre IE.

Answer 9

Esto funciona bien desde IE5 a IE11. También es compatible con todos los principales navegadores nuevos.

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