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

Question

Я хочу изменить размер пространства, где перемещается полоса прокрутки. Я не хочу, чтобы это влияло на то, сколько я могу прокрутить. Посмотрите на следующие рисунки (мои рисунки), чтобы лучше понять, что я имею в виду.

Я использую Chrome, поэтому WebKit является жизнеспособным.

Спасибо за все ваши ответы!

(П.С. Мне бы хотелось уменьшить размер изображения, но я не знаю, как это сделать! Мои извинения!).

Answer 1

Вы не можете изменить высоту полосы прокрутки, но вы можете изменить дизайн полосы прокрутки с помощью -webkit-scrollbar следующим образом:

    ::-webkit-scrollbar {
        width: 5px;
        height: 10px;
        background: transparent;

    }

    ::-webkit-scrollbar-thumb {
        background-color: #808080;
    }

Answer 2

Не вкладывая другой элемент и играя с его высотой, вы можете просто использовать огромный border-bottom и поместить видимую границу вокруг элемента, используя свойство outline, например,

div {
  width: 200px;
  height: 300px;
  outline: 1px #9bc solid;
  border-bottom: 50px transparent solid;
}

Кодовая демонстрация

---

Результат