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

Проще говоря, это то, что я хочу (полученный в браузере Webkit с использованием -webkit-scrollbar):

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

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

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

Ответы

Ответ 1

У меня была такая же проблема. Это не самое элегантное из решений, но просто поместите меньший div внутри внешнего блока, чтобы полоса прокрутки не перекрывала внешний блок.

Как этот код скопирован с этой ручки:

.box {
  height: 200px;
  width: 250px;
  border-radius: 10px;
  border: 2px solid #666;
  padding: 6px 0px;
  background: #ccc;
}

.box-content {
  height: 200px;
  width: 250px;
  overflow: auto;
  border-radius: 8px;
}

<div class="box">
  <div class="box-content">
    <ol>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ol>
  </div>
</div>

Ответ 2

Поместите содержимое, которое нужно прокрутить в div с помощью overflow: auto. Вокруг этого содержимого div поместите a 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>

Ответ 3

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

box-sizing: border-box;

Ответ 4

стройная с закругленными углами

@-moz-document url-prefix() {
    .scrollbar {
        overflow: auto;
        width: 0.5em !important;
        scroll-behavior: smooth !important;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
        background-color: darkgrey !important;
        outline: 1px solid slategrey !important;
        border-radius: 10px !important;
    }
}

::-webkit-scrollbar {
    width: 0.5em !important;
    scroll-behavior: smooth !important;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
}

::-webkit-scrollbar-thumb {
    background-color: darkgrey !important;
    outline: 1px solid slategrey !important;
    border-radius: 10px !important;
}

<div class="scrollbar" style="height: 500px">
</div>