2012-07-24 16 views
6

Estoy usando el plugin jQuery niceScroll para reemplazar las barras de desplazamiento comunes del navegador en overflowing <div>'s. El complemento está funcionando bien, pero no puedo hacer que funcione y mostrar el riel de desplazamiento siempre (incluso si el contenido no excede los límites de <div>). Mi configuración final es:Mostrar siempre niceScroll rail

$(document).ready(function() { 
    $(".div-wrapper").niceScroll({ 
     cursorcolor: "#333", 
     cursoropacitymin: 0.3, 
     background: "#bbb", 
     cursorborder: "0", 
     autohidemode: false, 
     cursorminheight: 30 
    }); 
}; 

He tratado de disparar $(".div-wrapper").getNiceScroll().show() pero no parece funcionar bien.

Cualquier ayuda se agradece, gracias

Respuesta

6

Antes que nada, tiene faltando un paréntesis al final - ¿podría ser ese su problema?

Al establecer el modo automático en falso solo significa que no desaparece cuando el usuario deja de desplazarse y luego aparece de nuevo mientras se desplaza. Lamentablemente, no significa que sea visible si el contenido no se desborda.

Como solución alternativa es posible que trate de hacer el elemento con id = ascrail2000 explícitamente visible después de su llamada a .niceScroll() con algo como esto:

$(document).ready(function() { 
    $(".div-wrapper").niceScroll({ 
     cursorcolor: "#333", 
     cursoropacitymin: 0.3, 
     background: "#bbb", 
     cursorborder: "0", 
     autohidemode: false, 
     cursorminheight: 30 
    }); 
    $('#ascrail2000').show(); 
}); 

ver el PAREN desaparecidos en la última línea de

Es posible que necesite para hacer sus elementos secundarios visibles, así:

$('#ascrail2000 *').show(); 

(Asegúrese de que el elemento' s id es ascrail2000 en su caso)

ACTUALIZACIÓN:. como Veritas ha señalado, mediante un selector más general div[id^='ascrail'] en lugar de #ascrail2000 hace que funcione durante más de un nicescroll en una página, por lo que el anterior se puede hacer con JavaScript:

$("div[id^='ascrail']").show(); 

o en CSS:

div[id^='ascrail'] { display: block; } 

o si el anterior no funciona:

div[id^='ascrail'] { display: block !important; } 

Esta no es la solución más elegante, pero me temo que esta es actualmente la única forma de resolver este problema porque el complemento nicescroll no tiene una opción para seleccionar ese comportamiento. Afortunadamente nicescroll es de código abierto y available on GitHub por lo que uno podría fácilmente tenedor y agregar dicha opción o post a feature request en GitHub.

+0

Gracias pero era un error tipográfico en mi pregunta:/No puedo establecer el valor codificado '#ascrail ...' en javascript (o CSS) porque puedo tener 'n' desplazamientos en la página. Pero '+ 1' por el esfuerzo y en parte buena respuesta. – veritas

+0

selector de CSS 'div [id^= 'ascrail'] {pantalla: bloque; } 'es una solución de CSS para este problema, pero preferiría algo más. – veritas

+1

@veritas: me temo que actualmente no hay una solución mejor, pero siempre puedes publicar una solicitud de funciones para que sea más fácil: consulta mi respuesta actualizada. – rsp

0

estoy asumiendo que si el contenido no se desborde el cuadro delimitador, niceScroll no hace nada, lo que podría ser su problema. Tenga en cuenta que niceScroll no es> $ overflow: scroll; ... Sin excavar en el plugin en sí no puedo estar seguro, pero supongo que tiene un cheque incorporado para comprobar si el contenido necesita desplazamiento, y si no lo hace, entonces la función sale silenciosamente.

+0

El complemento está creando scroll 'divs' en DOM y configurando su valor en' display: none; ' entonces funciona – veritas

6
$(".div-wrapper").niceScroll({ 
    cursorcolor: "#333", 
    cursoropacitymin: 0.3, 
    background: "#bbb", 
    cursorborder: "0", 
    autohidemode: false, 
    cursorminheight: 30 
}); 
0

veo esta respuesta con una búsqueda en Google, incluso si es de edad, esta es mi solución de trabajo si alguien vea esta en busca de una respuesta:

 $('#ascrail2000.nicescroll-rails').show(); 
     $('#ascrail2000.nicescroll-rails div').height('300px').show(); 

necesito fijar una altura arbitraria el div "bar", porque por defecto es height: 0px, incluso si lo muestra, no puede ver nada. Supongo que podemos hacerlo mejor y calcular una buena altura con las dimensiones de Windows, pero no es necesario :)

Cuestiones relacionadas