2013-02-11 10 views
8

Sto tentando di raggiungere uno scenario in cui un DIV ha barre di scorrimento interne e angoli arrotondati. Il mio primo tentativo ha portato in questo:DIV con angoli arrotondati e barre di scorrimento interne

enter image description here

Le curve a destra diventano piazza, a causa delle barre di scorrimento.

Successivamente, ho aggiunto un div interno con alcune imbottiture superiore e inferiore, per spingere le barre di scorrimento verso il basso e mantenere i cordoni contati. Che è venuto fuori in questo modo:

enter image description here

mi piacerebbe un ibrido in cui le barre di scorrimento sono la lunghezza del div, ma non fanno gli angoli quadrati. È possibile?

+0

si potrebbe condividere il tuo html e css con noi? –

+0

Dopo aver cercato un po 'di più e aver visto altre opinioni là fuori, penso che finirò per vivere con la barra di scorrimento del browser o usando una barra di scorrimento personalizzata come JScrollPane. Grazie per l'input!! –

risposta

1

Dovresti provare una barra di scorrimento personalizzata. Sugli screenshot sei su un sistema OS X, ma con IE (Windows) sarà terribile.

Dai uno sguardo allo this stackoverflow question.

+0

Se questa domanda è una copia di quella a cui ti sei collegato, dovresti contrassegnarla come tale. – KatieK

+2

Non è un duplicato ma una soluzione – soyuka

11

È possibile utilizzare il contenitore circostante (scrollbar-track) della barra di scorrimento (scrollbar-thumb).

esempio:

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

jsFiddle: http://jsfiddle.net/p2bWf/

fonte: http://css-tricks.com/custom-scrollbars-in-webkit/

+3

Questa è una soluzione di bell'aspetto, tuttavia, ha bisogno di lavorare in più di un semplice Chrome. L'apertura di questo in FF mostra un risultato simile alla mia prima immagine. Non penso di poterlo usare. –