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

scrolltop javascript ejemplos

Question

¿Cuál es la mejor forma de navegador cruzado 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

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

Answer 2

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

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

Answer 3

O simplemente simple como:

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

Answer 4

Sé que ha pasado bastante tiempo desde que se actualizó este hilo, pero esta es una función que creé y que permite a los desarrolladores encontrar el elemento raíz que en realidad alberga una propiedad funcional de "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 encuentres esto útil! Aclamaciones.

Answer 5

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

Por ejemplo, esto es esencialmente cómo jQuery implementa un desplazamiento entre navegadores (Arriba | 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: notará que el código anterior contiene una variable browserSupportsBoxModel que no está definida. jQuery define esto 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 IE 6 o 7 en modo peculiar . Como la detección es bastante compleja, la dejé como un ejercicio para ti ;-), suponiendo que ya hayas utilizado la detection feature browser en otro lugar de tu código.

Editar: si no lo has adivinado ya, te sugiero que uses 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 6

para ahorrarte todo el problema utiliza un marco como jquery o mootools que calcula todos estos valores en una línea (navegador cruzado) en mootools its $ (''element''). 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 necesita, el único problema es IE7 y, a continuación, este cálculo es un poco problemático ya que no toma en consideración el valor de posición del elemento, por ejemplo, si obtuvo una posición: atributo css absoluto para ese elemento el cálculo es realizado en el elemento padre de ese elemento

Answer 7

El código de YUI 2.8.1 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 que el código de jQuery 1.4.2 (un poco traducido para humanos) y suponiendo que lo entendí correctamente hace 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, la extracción del valor de jQuery.support.boxModel es casi imposible porque tendría que agregar un elemento secundario temporal en el documento y hacer las mismas pruebas que jQuery.

Answer 8

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 9

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