Как сверстать блок со скроллбаром?

Question

Есть следующий блок:

Как сверстать такой блок со скроллбаром? Можно ли это сделать на чистом CSS и без сторонних jquery-плагинов?

Answer 1

.box{
  width: 500px;
  height: 300px;
  background: red;
  overflow-y: auto;
  /*  FF  */
  scrollbar-color: blue transparent;
  scrollbar-width: 20px;
}


.box::-webkit-scrollbar {
    width: 20px;
}

.box::-webkit-scrollbar-thumb {
    background-color: blue;
}

<div class="box">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis deleniti vitae nisi voluptates fuga quos natus, ipsa earum beatae doloremque fugiat veritatis at inventore! Maiores ex voluptas id magni eaque.
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis deleniti vitae nisi voluptates fuga quos natus, ipsa earum beatae doloremque fugiat veritatis at inventore! Maiores ex voluptas id magni eaque.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis deleniti vitae nisi voluptates fuga quos natus, ipsa earum beatae doloremque fugiat veritatis at inventore! Maiores ex voluptas id magni eaque.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis deleniti vitae nisi voluptates fuga quos natus, ipsa earum beatae doloremque fugiat veritatis at inventore! Maiores ex voluptas id magni eaque.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis deleniti vitae nisi voluptates fuga quos natus, ipsa earum beatae doloremque fugiat veritatis at inventore! Maiores ex voluptas id magni eaque.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis deleniti vitae nisi voluptates fuga quos natus, ipsa earum beatae doloremque fugiat veritatis at inventore! Maiores ex voluptas id magni eaque.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis deleniti vitae nisi voluptates fuga quos natus, ipsa earum beatae doloremque fugiat veritatis at inventore! Maiores ex voluptas id magni eaque.
</div>

БЛОГ НА HUSL

Как сверстать блок со скроллбаром?

Ответы (1 шт):