Monday, February 4, 2013

Problemas con el evento .scroll() de jQuery sobre IE?

Programación > CSS


Como siempre! nuestro “amigo” Internet Explorer (IE) dándonos problemas.

Algo tan simple como tener un DIV con un evento “scroll” de jQuery no funciona para IE.

Pongamos un conjunto basico de elementos
<div id="pages"></div>

en CSS algo como:
#pages { overflow: auto; position: absolute; height: 290px; width: 100%;}

y en un script algo como:
$("#content #pages").scroll(function () { //code});

nos dará como resultado que funciona en todos los Navegadores menos IE. La conclusión que hemos sacado luego de algunas pruebas es que IE hace que el evento solo responda sobre las áreas donde exista algún elemento visual (traduzcase como alguna propiedad que realmente lo obligue a renderizar algo porque un DIV vacío no renderiza nada visual).

Si dentro del DIV ponemos algún elemento visual o sencillamente le asignamos un color pues el evento comienza responder. Pero si no puedo poner un color de fondo porque no va con el diseño de la página pues que hago?

Una solución simple que se me ocurrió es ponerle como background una imagen transparente de 1 pixel de ancho por alto y que se repita. De esta forma consigo todo lo que quiero:
- Que el DIV continúe sin “contenido visual” como lo necesito.
- Que IE lo asuma como que posee “contenido visual” y responda al evento en toda el área que abarca el DIV.

El CSS quedaría en algo como:
#pages {
overflow: auto; position: absolute; height: 290px; width: 100%;
background: url(../images/desktop/common/scroll-pages-bg-fix-to-ie.png) repeat;
}

Lo mismo pudiera aplicarse para los demás eventos de scroll como “mousewheel” aunque no le he probado.