Как сделать отступ для scrollbar?

Question

[John Norton]

Мне не нравится как расположен scrollbar внутри блока. И хотелось бы сделать отступ с правого края, чтобы scrollbar не вылезал за границы блока(border-radius родителя)

Вот пример:

Answer 1

[repcolding]

Самый адекватный способ это использовать библиотеку для scrollbar. Мне нравится https://www.npmjs.com/package/simplebar

Любая кастомизация нативного scrollbar через css болезненная: Поддержка браузерами/гибкость/функционал.

Слишком много подводных камней и ограничений.На данный момент, не оправдано, и не возможно сделать все с охватом большинства пользователей посетителей сайта. Идея что проще и лучше делать на css а не на js, иллюзия.

Comments

[John Norton]

Эх, жалко, что придется изучать библиотеку для решение по идеи лёгкого вопроса... (┬┬﹏┬┬)
Но спасибо за совет! ☜(ﾟヮﾟ☜)

Я как понял, что впринципе нету такой технической возможности добавить отступа для scrollbar через css

[Виталий Першин]

John Norton,

Я как понял, что впринципе нету такой технической возможности

Ну вы как минимум можете добавить внутренний блок, ему присвоить скролл и двигать куда захотите..

[repcolding]

Виталий Першин, John Norton Я согласен с этим. Можно обертку сделать:

<div class="wrapper"> <!-- padding -->
  <div class="wrapper__content"></div> <!-- overflow + padding -->
</div>

Но при фокусе на wrapper (отступ справа это уже не элемент со скроллом) скролла не будет. Это не критично, но одна из причин почему не особо люблю так делать

По высоте если захотите поменять отступы, не забывайте что нужно плюсовать padding-top с wrapper + wrapper__content. А то от дизайна отличия будут

[Ankhena]

repcolding,

По высоте если захотите поменять отступы, не забывайте что нужно плюсовать padding-top с wrapper + wrapper__content. А то от дизайна отличия будут

Тут на выручку приходят кастомные свойства. Чтобы не нужно было ничего помнить.

[repcolding]

Ankhena,

.wrapper {
  --outer-pd: 4px 8px;
  --inner-pd: 8px 16px;

  padding: var(--outer-pd);

  &__content {
    padding: var(--inner-pd);
  }
}

Добавлю, пусть мой предыдущий комментарий будет тогда максимально полным :)

[Poliklot]

repcolding, так так
Вот статья про это

И совместная поддержка старого и нового синтаксиса очень воодушевляет)
::-webkit-scrollbar(93%)
scrollbar-width(3%)

Сколько проектов закрыл за последние 2 года, с очень интересными запросами к кастомизации скроллбаров - ни разу не пришлось прибегать к использованию js для сие, CSS все решил