Настроенная полоса прокрутки CSS в div

Question

Настроенная полоса прокрутки CSS в div

Как настроить полосу прокрутки с помощью CSS (каскадный стиль) Таблицы) для одного div , а не для всей страницы?

314

html css scrollbar

задан JSuar 11 January 2013 в 09:59

2 ответа

Другие вопросы по тегам:

html css scrollbar

Похожие вопросы:

score 0 · Answer 1

Для людей, все еще ищущих хорошее решение просто, я узнаю этот плагин simplebar

Пользовательская ваниль полос прокрутки библиотека JavaScript с собственной прокруткой, сделанной простой, легкий, простой в использовании и перекрестный браузер.

В моем случае, я искал reactJS решения, автор также обеспечивает, обертки для реагируют, угловые, vue и затем примеры

score 0 · Answer 2

Браузеры WebKit (такие как Chrome, Safari и Opera) поддерживают нестандартное ::-webkit-scrollbar псевдо элемент, который позволяет нам изменять вид полосы прокрутки браузера.

Примечание: ::-webkit-scrollbar не поддерживается Firefox или IE и Краем.

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

div {
  width: 15rem;
  height: 8rem;
  padding: .5rem;
  border: 1px solid #aaa;
  margin-bottom: 1rem;
  overflow: auto;
}

.box::-webkit-scrollbar {
  width: .8em;
}

.box::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
 
.box::-webkit-scrollbar-thumb {
  background-color: dodgerblue;
}

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p>
</div>

Ссылка: , Как Создать Пользовательскую Полосу прокрутки