2012-07-24 16 views
6

Sto usando il plug-in niceScroll jQuery per sostituire le comuni barre di scorrimento del browser in overflow <div>'s. Il plug-in funziona bene, ma non riesco a farlo funzionare e visualizzare la barra di scorrimento sempre (anche se il contenuto non supera i limiti <div>). La mia configurazione finale è:Mostra sempre niceScroll rail

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

Ho cercato di sparare $(".div-wrapper").getNiceScroll().show() ma non sembra funzionare.

Qualsiasi aiuto sarebbe apprezzato, grazie

risposta

6

Prima di tutto, hai una parentesi mancante alla fine - potrebbe essere il tuo problema?

L'impostazione di autohidemode su false significa solo che non scompare quando l'utente interrompe lo scorrimento e quindi appare di nuovo durante lo scorrimento. Sfortunatamente non significa che sia visibile se il contenuto non trabocca.

Come una soluzione si può provare a fare l'elemento con id = ascrail2000 esplicitamente visibile dopo la chiamata a .niceScroll() con qualcosa di simile:

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

VEDERE IL PAREN MANCANTE nell'ultima riga

potrebbe essere necessario per rendere i suoi elementi per bambini visibile così:

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

(assicurarsi che l'elemento' s id è ascrail2000 nel tuo caso)

UPDATE:. come Veritas ha sottolineato, utilizzando un selettore più generale div[id^='ascrail'] invece di #ascrail2000 lo fa funzionare per più di un nicescroll su una pagina, in modo quanto sopra può essere fatto con JavaScript:

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

o in CSS:

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

o se quanto sopra non funziona:

Questa non è la soluzione più elegante, ma temo che questo sia attualmente l'unico modo per risolvere questo problema perché il plug-in nicescroll non ha un'opzione per selezionare tale comportamento. Fortunatamente nicescroll è open source e available on GitHub quindi potresti facilmente aggiungerlo e aggiungere una tale opzione o post a feature request su GitHub.

+0

Grazie, ma ero un errore di battitura nella mia domanda:/Non posso impostare il valore '#ascrail ...' hardcoded in javascript (o CSS) perché posso avere 'n' scorre sulla pagina. Ma '+ 1' per lo sforzo e in parte una buona risposta. – veritas

+0

Selettore CSS 'div [id^= 'ascrail'] {display: block; } 'è una soluzione CSS per questo problema ma preferirei qualcos'altro. – veritas

+1

@veritas: temo che al momento non esista una soluzione migliore, ma puoi sempre pubblicare una richiesta di funzionalità per renderla più semplice - vedi la mia risposta aggiornata. – rsp

0

Io parto dal presupposto che se il contenuto non trabocchi il rettangolo di selezione, niceScroll non fa nulla, che potrebbe essere il problema. Tieni presente che niceScroll non è> $ overflow: scroll; ... Senza scavare attraverso il plug-in stesso non posso esserne certo, ma suppongo che abbia un controllo integrato per verificare se il contenuto ha bisogno di scorrere, e se non lo fa, quindi la funzione esce silenziosamente.

+0

Il plugin sta creando scroll 'divs' in DOM e impostando il loro valore su' display: none; ' quindi funziona. – veritas

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

vedo questa risposta con una ricerca su Google, anche se è vecchio, questo è il mio soluzione di lavoro se qualcuno vede questo in cerca di una risposta:

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

ho bisogno di impostare un'altezza arbitrario il div "bar", perché di default è height: 0px, anche se lo si visualizza, non si vede nulla. Suppongo che possiamo fare meglio di calcolare una buona altezza con le dimensioni di Windows, ma non ho bisogno di :)

Problemi correlati