Come creare una barra di scorrimento personalizzata su un div (stile Facebook)

Question

Mi chiedo come sia stata creata la barra di scorrimento personalizzata su Facebook.

È solo css o qualche javascript?

Se sì, posso avere un'idea di come appare il codice?

Questa domanda è specifico per Facebook stile barra di scorrimento e non come avere semplicemente una barra di scorrimento personalizzato

Answer 1

This link dovrebbe iniziare. Per farla breve, un div che è stato disegnato per sembrare una barra di scorrimento è usato per catturare gli eventi click-and-drag. Collegati a questi eventi ci sono metodi che fanno scorrere il contenuto di un altro div che è impostato su un'altezza arbitraria e in genere ha una regola CSS di overflow: scroll (ci sono varianti sulle regole css ma ottieni l'idea).

Sono tutto sull'esperienza di apprendimento, ma dopo aver appreso come funziona, consiglio di utilizzare una libreria (di cui ce ne sono molte) per farlo. E 'una di quelle cose "non reinventare" ...

EDIT Se si desidera saltare la fase di apprendimento del tutto, jassi9911 ha registrato un link ad un plugin jQuery che è morto semplice da usare. Roba buona.

Answer 2

sua una combinazione di entrambi JavaScript e CSS

http://jscrollpane.kelvinluck.com/basic.html

Answer 3

Se siete alla ricerca di un Facebook come barra di scorrimento, quindi mi raccomando di dare un'occhiata a questo:

http://rocha.la/jQuery-slimScroll

Answer 4

Ho risolto questo problema con l'aggiunta di un altro div come un fratello al contenuto a scorrimento div. L'altezza è impostata sul raggio dei bordi curvi. Ci saranno problemi di progettazione se si ha un contenuto che si vuole spingere fino in fondo, o il testo che si desidera scorrere in questo nuovo div, ecc. ma per la mia interfaccia utente questo div sottile non è un problema.

Il vero trucco è quello di avere la seguente struttura:

<div class="window"> 
<div class="title">Some title text</div> 
<div class="content">Main content area</div> 
<div class="footer"></div> 
</div> 

importanti CSS punti salienti:

• tuo CSS definirebbe la regione contenuto con un'altezza e troppo pieno per consentire la barra di scorrimento (s) apparire.
• La classe di finestra ottiene gli stessi angoli diametro come il titolo e piè
• L'ombra, se desiderato, viene dato solo alla classe finestra
• L'altezza del div piè è uguale al raggio della angoli inferiori

Ecco quello che sembra:

Answer 5

Facebook utilizza una tecnica molto intelligente che ho descritto in un contesto del plug-in scrollbar jsFancyScroll:

Il contenuto a scorrimento viene effettivamente spostato in modo nativo dai meccanismi di scorrimento del browser mentre la barra di scorrimento nativa è nascosta utilizzando le definizioni di overflow e la barra di scorrimento personalizzata viene mantenuta sincronizzata dall'ascolto di eventi bidirezionali.

Sentitevi liberi di usare il mio plug-in per il vostro progetto: :)

https://github.com/leoselig/jsFancyScroll/

lo consiglio vivamente oltre plugin come TinyScrollbar che vengono con problemi di prestazioni terribili!