Как сделать сделать полосу прокрутки тоньше чем ползунок?

Question

Надо сделать как на картинке.

Пробовал просто уменьшить полосу. Также пробовал задать рамку transparent.

Answer 1

Вот пример, как можно сделать такой скроллбар:

#page {
    width: 50%;
    height: 200px;
    z-index: 30;
    border: 2px solid rgb(0, 255, 0);
    border-radius: 10px;
    padding: 10px;
    overflow-y: hidden;
    overflow-x: hidden;
}

#block{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

#block::-webkit-scrollbar {
    width: 5px;
}

#block::-webkit-scrollbar-track {
    background: rgb(255,0,0);
    border: 1px solid transparent;
    background-clip: content-box;
}

#block::-webkit-scrollbar-thumb {
    background: rgb(0,0,255);
    border: 1px solid rgb(0,0,0);
}

<div id="page">
  <div id="block">
   <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text text text text text text text text text text </p>
  <p>text textt text text text text text</p>
  </div>
</div>

Цвета выбрал специально такие, чтобы показать, какая строчка за что отвечает. Если хотите я думаю разберетесь куда какой свой цвет вставлять. Удачи :)

БЛОГ НА HUSL

Как сделать сделать полосу прокрутки тоньше чем ползунок?

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