Plug-in scrollTo de jQuery y nuestro CSS

Publicado: 27/07/2010 en bug, desarrollo, JavaScript, jQuery, plug-in, Programación, scrollTo
Etiquetas:, , , , , , ,

You can read the English version of this post in http://phpsblog.agustinvillalba.com/scrollto-jquery-plug-in-css/

Hoy vamos a hablar un poco del plug-in para jQuery scrollTo y su dependencia “oculta” con la carga de nuestros archivos CSS.

scrollTo de jQuery

El plug-in scrollTo de jQuery (desarrollado por Ariel Flesler) nos permite que nuestra página web realice un scroll (desplazamiento de la barra vertical) hasta cualquier elemento de nuestro documento web que necesitemos, de esta forma podemos centrar la atención del usuario en dicho elemento cada vez que se recarga la página (por ejemplo, una entrada del menú de la izquierda en nuestra web), evitándole al usuario tener que hacerlo él manualmente. En la web del proyecto del plug-in podrás encontrar toda (o casi toda) la documentación necesaria para integrarlo en tu proyecto web. De más está decir que para poder utilizarlo has de incluir también en tu proyecto el propio framework JavaScript jQuery. A este plug-in que tan útil me ha sido sólo le encontré un pequeño fallo de documentación…

Interacción entre scrollTo y nuestro CSS

El fallo de documentación del que hablo es que en ningún lugar se nos explica (quizá el propio Ariel no esté al tanto de ello…) que para que el plug-in funcione a la perfección necesita que todas las reglas CSS del elemento al que le queremos aplicar el scrollTo estén cargadas en el navegador antes de la ejecución de la función scrollTo. Es decir, que si intentamos ejecutar el scrollTo y las reglas CSS del elemento al que se debe aplicar el scroll, aún no hay sido leídas e interpretadas por el navegador del cliente, el scroll no se puede realizar, y además no nos lanza ningún error, por lo que, a ojos del cliente, el scroll nunca se ha llegado siquiera a ejecutar.

La solución que a priori se nos puede ocurrir es llamar a la función scrollTo una vez que todos los elementos del DOM estén cargados en el navegador. Para ello utilizaríamos la siguiente sintaxis de jQuery:

$(function(){
$('#elemento').scrollTo($('#elementoDestino'));
});

Esto podría valer, sólo tiene un incoveniente y es que la función $(function…) de jQuery ejecuta el scrollTo una vez que nuestro DOM está cargado y listo para usarse, pero eso no significa que se hayan aplicado todas las reglas CSS al elemento “#elemento” ni al objeto “#elementoDestino”, por lo que el scrollTo puede funcionar… o no, todo depende de lo rápido que nuestro navegador cargue las reglas CSS.

La solución

La única solución que nos queda (mientras que los desarrolladores de navegadores no implementen el lanzamiento de un evento una vez que se ha cargado el CSS por completo) es utilizar el evento load del objeto window del navegador.

window.load = function(){$('#elemento').scrollTo($('#elementoDestino'));};

El evento load se lanza una vez que toda la página ha sido cargada en el navegador, incluidas las reglas CSS. Puede no ser la solución más elegante, pero es la única que nos soluciona el problema.

De todas formas, y quitando este pequeño detalle de la documentación, el plug-in scrollTo me parece un plug-in genial que nos ahorra muchos dolores de cabeza.

You can read the English version of this post in http://phpsblog.agustinvillalba.com/scrollto-jquery-plug-in-css/

Anuncios
comentarios
  1. Kaladras dice:

    Hola,

    Muy buen aporte de Ariel y también del autor de este post. Tengo una duda que no sé si el mismo Ariel o alguno que lo lea podrá resolvérmela: ¿es posible que el scrollto te mande a un destino sin pasar por todos los que pilla por medio? Es decir, tengo (por ejemplo) 4 secciones navegables mediante el scrollto en horizontal. Si estoy en la primera sección y quiero ir directamente a la 4ª, me gustaría ir por scroll directo sin ver todas las demás pasar rápido hasta llegar a la 4ª. Espero haberme explicado bien 🙂

    Gracias!

    • Hola Kaladras!

      Lo que pretendes hacer no es posible con scrollto. Fíjate que scrollto lo que hace es lanzar el evento de scroll del navegador a la posición que se le indique, simulando el scrolling manual que haría un usuario, por lo que no es posible saltar a una posición determinada sin antes pasar por todas las anteriores.

      Un saludo!

    • Ariel Flesler dice:

      Es posible scrollear en tiempo 0, es decir, instantaneamente. Tal vez se pueda hacer un scrollTo con tiempo 0 a donde deberia empezar y depues otro con una duracion mayor hasta el destino final.

  2. Ok como quieras, si queres mandame por mail.

  3. Tenes una demo online para que lo vea?

  4. Hola Agustin, jQuery.scrollTo funciona en general igual que $().animate(). El comportamiento estandar de los browsers es que si queres escrolear mas alla del limite de un objeto, el navegador limita el numero y no guarda cual deberia haber sido.

    De todas maneras, si pones los CSS en el head y el script que llama a scrollTo justo despues de cerrar el objeto que se escrolea, entonces deberia ir bien (sin document.ready). Igual, siempre pueden pasar cosas raras 😀

    • Hola Ariel, verás, los css los tengo en el head y el scrollTo lo incluyo y llamo justo despues de cerrar el elemento que quiero scrollear, pero aun así me sigue sucediendo el problema. También es verdad que yo necesito scrollear dentro de un div scrollable con overflow, y por ahí pueden haber comportamientos “extraños” de los navegadores como tu comentas…
      De todas formas, muchas gracias por el aporte y muy buena librería.

  5. Como siempre una entrada estupenda 😉 Muchas gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s