Bewerben Border-Radius um Scroll-Leisten mit CSS

Question

es einfach zu setzen, ist es das, was ich will (auf einem Webkit-Browser erhalten -webkit-Scrollbar verwenden):

Und das ist, was ich erhalten auf Opera (Firefox nicht die Grenze Radius dem Scrollbar entweder gilt, gilt aber nach wie vor die Grenze):

Ist ther e eine einfache Möglichkeit, den Rand nicht unter der Bildlaufleiste verschwinden zu lassen?

Ich brauche nicht die Phantasie Stil -webkit-Scrollbar aber ich möchte die Seite sauber und symmetrisch aussehen ...

Answer 1

Ich habe das gleiche Problem gehabt. Es ist nicht die eleganteste Lösung, aber das ist, was ich getan habe ...

Setzen Sie einfach ein kleineres Div in Ihrer äußeren Box, so dass die Bildlaufleiste die äußere Box nicht überlappt. http://codepen.io/DeadWhisky/pen/eKFha

Answer 2

Wäre schön, wenn man eine Geige liefern könnte. Dennoch shoud Sie versuchen, die Box-Schlichte auf den Behälter zu border-Box zu wechseln (falls noch nicht geschehen):

box-sizing: border-box; 

Answer 3

Legen Sie den Inhalt, der gescrollt werden muss, in eine div mit overflow: auto. Um diesen Inhalt div setzen Sie eine div mit Ihren abgerundeten Ecken und overflow: hidden.

Jetzt können Sie die Bildlaufleiste sehen, aber ihre äußeren Ecken sind verdeckt und stören nicht die abgerundeten Ecken der äußeren div.

Beispiel:

// 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>