0

Нашел очень много материала по цветовому оформлению. Но ни одного сайта, где бы рассказывалось о настройке ширины полосы прокрутки, отступов от нее до текста. Кто делал, поделитесь опытом.

3 ответа 3

7

Вот тебе пример. Это нужно? Полосу прокрутки менять тут нельзя. Это стандартный контрол операционной системы. Можно слепить что-то свое на javascript. Пример тут, смотри блок справа со списком видео. Используют, если нужна 100% стилизация всех элементов сайта. Отступ от полосы до текста регулируется свойством padding, впрочем, как и до других границ: верх, низ, лево.

Добавлено. В примере используется flash. Есть плагины jQuery для полос прокрутки, целых 10 штук.

2
  • Интересно, про "слепить на javascript" есть готовые примеры... а то там, где вы показали, там, кажется, flash использовалось. 26 янв 2012 в 20:07
  • Ответ обновил.
    – komka
    26 янв 2012 в 20:36
1

на js есть хороший пример flexscroll

1
  • Чем лучше других?
    – komka
    25 фев 2012 в 12:29
0

Так можно поменять стандартный scrollbar

<style>
-webkit-scrollbar{height:10px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track-piece:vertical{background-color:#3c3c3c}::-webkit-scrollbar-track-piece:horizontal{background-color:#3c3c3c}::-webkit-scrollbar-thumb:vertical{background-color:#787878;border:1px #8f8f8f solid;border-radius:3px;-webkit-border-radius:3px}::-webkit-scrollbar-thumb:vertical:hover{background-color:#969696}::-webkit-scrollbar-thumb:vertical:active{background-color:#5b5b5b}::-webkit-scrollbar-thumb:horizontal{background-color:#787878;border:1px #8f8f8f solid;border-radius:3px;-webkit-border-radius:3px}::-webkit-scrollbar-thumb:horizontal:hover{background-color:#969696}::-webkit-scrollbar-thumb:horizontal:active{background-color:#5b5b5b}::-webkit-scrollbar-button:horizontal{background-color:#5e5e5e;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:horizontal:hover{background-color:#747474;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:horizontal:active{background-color:#6b6b6b;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:vertical{background-color:#5e5e5e;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:vertical:hover{background-color:#747474;background-repat:no-repeat;width:10px;height:10px}::-webkit-scrollbar-button:vertical:active{background-color:#6b6b6b;background-repat:no-repeat;width:10px;height:10px}::-webkit-resizer{background-color:#5e5e5e;background-repeat:no-repeat;width:5px;height:5px}::-webkit-resizer:hover{background-color:#747474;background-repeat:no-repeat;width:5px;height:5px}::-webkit-resizer:active{background-color:#6b6b6b;background-repeat:no-repeat;width:5px;height:5px}
</style>

Демо --> Ссылка

1
  • Только это не кроссбраузерное решение и работать будет только на webkit-движке. 11 сен 2016 в 13:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.