Stile di una barra di scorrimento interna come l'interfaccia di conversazione di Twitter?
La barra di scorrimento può essere visto nel pannello laterale quando si fa clic su un tweet e la conversazione legata al tweet è abbastanza lungo.
Come viene creata e disegnata la barra di scorrimento?
Stanno usando ::-webkit-scrollbar e gli pseudo-elementi associati, che solo il lavoro nei browser WebKit (che va bene, perché questa è solo estetica).
Date un'occhiata a questo per ulteriori informazioni: Apple-like scrollbars using CSS
ho preso il CSS che Twitter sta usando, vedi: http://jsbin.com/ubasew
#doc ::-webkit-scrollbar{width:9px;height:9px;}
#doc ::-webkit-scrollbar-button:start:decrement,#doc ::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
#doc ::-webkit-scrollbar-track-piece{background-color:#FAFAFA;-webkit-border-radius:0;-webkit-border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;}
#doc ::-webkit-scrollbar-thumb:vertical{height:50px;background-color:#999;-webkit-border-radius:8px;}
#doc ::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:#999;-webkit-border-radius:8px;}
Il #doc è come Twitter ha avuto, ed è lì in modo che solo le barre di scorrimento all'interno di #doc siano personalizzate.
Credo che stanno utilizzando un plugin jQuery o di quello creato da loro stessi, in entrambi i casi si tratta di qualcosa di simile a JScrollPane
http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Questo è come lo faresti se avessi bisogno di qualcosa che funzionasse in ogni browser, ma non è quello che sta usando Twitter. – thirtydot
Grazie Joe, capirò in che direzione voglio andare :) – Mattis
O google per quella materia, controlla anche gmail – styler1972
Mi chino la testa nella radiosità delle tue gloriose abilità-anabbaglianti :) – Mattis
Nota che questo rimuove il problema e giù le frecce e ignora le impostazioni della larghezza della barra di scorrimento dell'utente. Potrebbe essere carina, ma è dannosa per l'usabilità. È accettabile per un piccolo iframe o div scorrevole, ma non lo userei su un'intera pagina. Se lo fai, almeno fai sembrare la barra di scorrimento come una barra di scorrimento. Se il colore della grondaia corrisponde allo sfondo della pagina, l'utente può arrivare alla fine dell'area visibile e nemmeno realizzare una barra di scorrimento perché il pulsante è molto sopra. – Webveloper
è solo quel webkit? – zx1986