Как сделать кастомный скроллбар, выходящий за границы прокручиваемого контента?

Question

[Андрей]

Подскажите, пожалуйста, плагин или как можно стилизовать стандартный скроллбар, чтобы добиться результата на скрине. Пробовал сдвинуть стандартный - не получилось. Также попробовал библиотеку Jquery scrollbar, но она не очень стабильно работает

Answer 1

[Фёдор]

Кроссбраузерная кастомизация системного скроллбара

Comments

[WbICHA]

Серьёзно? Даже в самой статье говорится:

более или менее гибко кастомизировать скроллбар средствами CSS можно только в браузерах на движке webkit.

В фф на данный момент можно изменить только:

scrollbar-color: #fff #000; /* цвет ползунка + цвет полосы прокрутки */

scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

[Фёдор]

WbICHA, Можно просмотреть вариант автора и основываясь на его идее реализовать свой скроллбар.

[WbICHA]

Фёдор, у автора статьи решение на цссе, что в данном случае, из-за кроссбраузерности, чуть более, чем недостаточною.

[Фёдор]

WbICHA, Тогда автору стоит копать в сторону решений за рубежом и ограничиться тегом JavaScript.

Answer 2

[WbICHA]

Берёшь существующие жс скроллбары и стилизуешь как надо:
https://codepen.io/dec04/pen/FCneH

blog.dynamicdrive.com/top-7-custom-scrollbar-javas...

Answer 3

[Арсений Матыцин]

Готовые библиотеки тебе в помощь, но суть вообще проста: надо высчитать видимую область и соотношение ей ко всему прокручиваемому контенту, да перенести это соотношение в кастомник в виде размеров. Так как видимая область это обычно некий блок с фиксированной высотой, у которого включена прокрутка (которую надо скрыть), то внутрянки достаточно обернуть в еще один блок, чтобы получить размер.

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