Как можно сделать отступы скролла слева и справа?

Question

[Руслан Абсалямов]

В макете указан скролл как на MacOS. Такой вопрос можно ли что-то подобно создать и как их кастомизировать?

Answer 1

[mihailv88]

Только скриптом такое можно сделать. Есть под некоторые браузеры css для изменения скролла, но с ними так не сделать.

Вам надо самостоятельно подобрать себе скрипт скрола. У каждой свои плюсы и недостатки. Некоторые вообще в каких-то случаях не помогут. Поэтому тут надо вам подобрать под себя подходящий вариант.

Мне приходилось под разные задачи и сайты разные использовать. Только только думаю - идеальный скрипт, а потом бац и в другом проекте показываются его проблемы.

Answer 2

[Destell]

manos.malihu.gr/jquery-custom-content-scroller

Answer 3

[Станислав Смирнов]

Есть вариант воспользоваться "костылем". У ползунка задать border с цветом скроллбара. Например:
::-webkit-scrollbar {
width: 14px;
background-color: #303030;
}

::-webkit-scrollbar-thumb {
background-color: #ffffff;
border: 3px solid #303030;
}

* Отступ можно регулировать с помощью толщины border.

Comments

[HarberRiddel]

Как в этом случае закруглить ползунок?

[Станислав Смирнов]

Использовать для ползунка (::-webkit-scrollbar-thumb) border-radius

Answer 4

[AlexKeller]

Вообще, идея кастомизировать скролл обречена на муки. Сколько я этих плагинов видел, ни один не отличался безупречной работой. Но я правда и года 2 уже за jQuery не слежу, мож че и появилось.

Но вот например хром позволяет стилизовать свои скроллы:
::-webkit-scrollbar
::-webkit-scrollbar-corner
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track-piece

htmlbook.ru/blog/polzovatelskie-skrollbary-v-webkit