Applicare border-radius Per barre di scorrimento con i CSS

Question

Per dirla semplice, questo è quello che voglio (ottenuti su un browser Webkit utilizzando -webkit-barra di scorrimento):

E questo è quello che ottenere su Opera (Firefox non si applica il raggio confine con la barra di scorrimento sia, ma si applica ancora il confine):

Is ther e un modo semplice per far sparire il bordo sotto la barra di scorrimento?

ho bisogno lo stile fantasia di -webkit-scrollbar ma vorrei la pagina per guardare pulito e simmetrica ...

Answer 1

Ho avuto lo stesso problema. Non è la soluzione più elegante, ma è quello che ho fatto ...

Basta inserire un div più piccolo all'interno della scatola esterna in modo che la barra di scorrimento non si sovrapponga alla scatola esterna. come questo http://codepen.io/DeadWhisky/pen/eKFha

Answer 2

sarebbe bello se si potesse fornire un violino. Tuttavia, dovreste provare a cambiare il box-dimensionamento sul contenitore per border-box (se non già fatto):

box-sizing: border-box; 

Answer 3

Inserire il contenuto che deve essere scostato in un div con overflow: auto. Intorno a quel contenuto div metti un div con gli angoli arrotondati e overflow: hidden.

Ora è possibile visualizzare la barra di scorrimento ma i suoi angoli esterni sono nascosti e non disturbano gli angoli arrotondati del div esterno.

Esempio:

// Insert placeholder text 
 
document.querySelector('.inner').innerHTML = 'Text<br>'.repeat(20);

.outer { 
 
    width: 150pt; 
 
    border: 1px solid red; 
 
    border-radius: 15pt; 
 
    overflow: hidden; 
 
} 
 

 
.inner { 
 
    height: 200px; 
 
    overflow-y: auto; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
     <!-- lots of text here --> 
 
    </div> 
 
</div>