Zastosuj border-radius Do przewijania z CSS

Question

Mówiąc prosto, jest to, co chcę (uzyskane na Webkit Browser za pomocą -webkit-przewijania):

i to, co ja dostać się na operze (Firefox nie stosuje się promień granicy do przewijania albo, ale nadal obowiązuje granicę):

Czy Ther Prosty sposób, aby granica nie zniknęła pod paskiem przewijania?

Ja nie potrzebuję fantazyjny styl -webkit-przewijania ale chciałbym strona wyglądać czyste i symetryczne ...

Answer 1

miewam ten sam problem. To nie jest najbardziej eleganckie rozwiązanie, ale właśnie to zrobiłem ...

Po prostu umieść mniejszy div wewnątrz zewnętrznego pudełka, aby pasek przewijania nie zachodził na zewnętrzne pudełko. Podobnie jak http://codepen.io/DeadWhisky/pen/eKFha

Answer 2

Byłoby miło, gdyby można było dostarczyć skrzypce. Niemniej jednak, ty powinien spróbować zmienić skrzynkowej zaklejanie na pojemniku do border-box (jeśli jeszcze tego nie zrobiłeś):

box-sizing: border-box; 

Answer 3

Umieść zawartość, która musi być przewinięta w div z overflow: auto. Wokół tej treści div umieść div z zaokrąglonymi narożnikami i overflow: hidden.

Teraz możesz zobaczyć pasek przewijania, ale jego zewnętrzne rogi są ukryte, a nie zakłócają zaokrąglonych rogów zewnętrznej części zewnętrznej div.

Przykład:

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