Как кастомизировать скроллбар полосы прокрутки при переполненном div?

Question

Необходимо сделать видимую часть трека скроллбара тоньше чем сам ползунок. Безрезультатно пытаюсь использовать вот такой css:

.reviewBlock__text::-webkit-scrollbar {
    width: .5rem ;
    background: #74E6CF;
    border-radius: 50px;

}

.reviewBlock__text::-webkit-scrollbar-track-piece {
    width: 0.1rem;
}

.reviewBlock__text::-webkit-scrollbar-thumb {
    width: 0.5rem;
    height: 1rem;
   
    background: linear-gradient(141.39deg, #74E6CF 13.88%, #C0E594 106.32%);
    border-radius: 50px;
}

Answer 1

На элементах ::-webkit-scrollbar-track-piece и ::-webkit-scrollbar-thumb ни ширина и ни высота не применяется.

Установи ширину на ::-webkit-scrollbar и

background: linear-gradient(270deg, #00000000 25%, #74E6CF 25%, #74E6CF 75%, #00000000 75%);

тогда будет казаться что ползунок в 2 раза больше, но на border-radius будет половинка круга.

Answer 2

Как вариант использовать box-shadow с цветом как у scrollbar

Пример

.reviewBlock__text {
  background-color: #ccc;
  max-height: 200px;
  max-width: 300px;
  overflow-y: auto;
  padding: 1em;
}

.reviewBlock__text::-webkit-scrollbar {
  width: 1em;
  background: #74e6cf;
  border-radius: 50px;
  box-shadow: inset 0 0 0 4px #ccc;
}

.reviewBlock__text::-webkit-scrollbar-thumb {
  background: linear-gradient(141.39deg, #74E6CF 13.88%, #C0E594 106.32%);
  border-radius: 50px;
  position: relative;
}

<div class="reviewBlock__text">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt pariatur tenetur, aperiam qui quibusdam est obcaecati placeat ut neque eos rerum! Magnam quas ex cupiditate consequuntur accusantium impedit saepe neque. Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Animi, id? Nostrum in autem corrupti omnis, qui totam, cupiditate non eius est alias tempora, nobis doloremque neque ratione consequuntur sapiente quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ad sed odio laudantium
  consequatur quibusdam iste labore corrupti natus expedita fuga corporis adipisci ut voluptatibus, earum voluptas minus. Enim, soluta.
</div>

БЛОГ НА HUSL

Как кастомизировать скроллбар полосы прокрутки при переполненном div?

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