Применить границы радиуса К с помощью CSS Полосы прокрутки

Question

Выражаясь просто, это то, что я хочу (полученный на Webkit браузера с помощью -webkit-скроллбар):

И это то, что я попасть на Opera (Firefox не применяется радиус границы в полосе прокрутки либо, но по-прежнему применяет границу):

ли Ther e простой способ сделать границу не исчезнуть под полосой прокрутки?

Мне не нужно фантазии стиль -webkit-скроллинга, но я хотел бы, чтобы страница выглядеть чистым и симметричным ...

Answer 1

Я был с таким же вопросом. Это не самые изящные решения, но это то, что я сделал ...

Просто поместите меньший div внутри вашей внешней коробки, чтобы полоса прокрутки не перекрывала внешнюю коробку. http://codepen.io/DeadWhisky/pen/eKFha

Answer 2

Было бы хорошо, если бы вы могли бы поставить скрипку. Тем не менее, вам следует попытаться изменить бокс-проклейку на контейнер в приграничный коробок (если это еще не сделано):

box-sizing: border-box; 

Answer 3

Поместите содержимое, которое необходимо прокрутить в файле div с помощью overflow: auto. Вокруг этого контента div введите div с закругленными углами и overflow: hidden.

Теперь вы можете видеть полосу прокрутки, но ее внешние углы скрыты, а не нарушают закругленные углы внешнего div.

Пример:

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