2012-04-16 12 views
6

Me gustaría reemplazar la barra de desplazamiento predeterminada de mi sitio (en particular, la página THIS) utilizando un complemento jQuery llamado TinyScrollbar. Sin embargo, por alguna razón estoy recibiendo el siguiente error en la página:Problema que reemplaza la barra de desplazamiento predeterminada mediante el plugin jQuery

jquery.tinyscrollbar.min.js:1Uncaught TypeError: Cannot read property 'offsetHeight' of undefined 

se puede ver este error al elemento de inspección en Chrome.

¿Alguien puede tener alguna idea de por qué ocurre este error? El código que estoy utilizando para inicializar el plugin se puede ver a continuación:

$('#full-height-template-container').tinyscrollbar(); 
+1

el problema tal vez en su 'fadeIn', intente usar la función' callback' de fadin para luego asignar tinyscroll al elemento, ya que el elemento no tiene desplazamiento hasta que sea ': visible' – SpYk3HH

+0

¿Cómo lo haría? Pensé que desde que estaba llamando a tinyScroll después de fadeIn no habría ningún problema allí. ¿Debería hacer .fadeIn (function() {tiny scroll here}); –

+0

No document.ready se ejecuta después de que el DOM se haya cargado? –

Respuesta

19

El problema es que no utiliza el plugin que se supone que debes usarlo.

El error (en Firefox firebug), utilizando el archivo fuente de tinescrollbar, muestra: oViewport.obj[0] es undefined. Si observa algunas líneas en el código fuente, puede ver que el objeto obj de oViewport se define como: $('.viewport', root). Aquí, raíz es tu contenedor. Aparentemente no encuentra un elemento html con la clase .viewport. ¡Su página no contiene un elemento html con dicha clase!

Si mira en website de tinyscrollbar, puede ver en la sección 'Cómo hacer' cómo crear el HTML correcto para que el complemento funcione.

Tal vez un plugin más fácil (similar) que puede usar es jScrollPane. No requiere que el HTML se configure como tiniscrollbar's.

+0

La mejor parte de jScrollPane es que funciona también en navegadores móviles, incluso si no es perfecto, es mejor que la mayoría de los complementos que he probado. –

0

El sitio web Tiny Scrollbar no menciona que la biblioteca JS tiene nombres de clase codificados de manera rígida. Puede cambiar esto extendiendo la biblioteca para aceptar los nombres de clase de los elementos html individuales requeridos.

Cuestiones relacionadas