В последнее время очень много желающих каким-то образом кастомизировать скроллбары на странице. Желание вполне естественное - все настраивается, а скроллбар - не настраивается. Непорядок! Давайте настроим скроллбар.
Кастомизировать удастся только скроллбары внутри сайта, но не браузерный скролл (можно настроить и его, но об этом отдельно). Соответственно, любой блок с прокруткой на форуме можно легко оформить под дизайн форума.
Все ниже приведенное лучше ставить туда, где у Вас будут стоять блоки с прокруткой (хтмл-верх, хтмл-низ, объявление, форма ответа, описание форума). Но если у Вас много таких блоков некоторые части можно проставить один раз и этого будет достаточно, чтобы работало везде.
1. Хтмл-верх (если у Вас только одно место, где стоят блоки с прокруткой, ставьте туда, где блоки). Ставите один раз, сколько бы блоков у Вас не было.
jQuery-плагин
<script type="text/javascript" src="https://forumstatic.ru/files/0011/e9/e1/48134.js"></script>
//скрипт можно скачать и загрузить к себе на форум, чтобы он работал стабильней.
2. Хтмл-верх/Свой стиль (если у Вас только одно место, где стоят блоки с прокруткой, ставьте туда, где блоки). Ставите один раз, сколько бы блоков у Вас не было.
Минималистический вариант
Код:<style type="text/css"> /* Настраиваем скроллбар */ .scrollgeneric { line-height: 1px; font-size: 1px; position: absolute; top: 0; left: 0; } .vscrollerbase { /*База вертикального скроллбара*/ width: 10px; background-color: #f4cf9e; } .vscrollerbar { /*Цвет и ширина бегунка вертикального скроллбара*/ width: 10px; background-color: #b75d2c; } .hscrollerbase { /*База горизонтального скроллбара*/ height: 10px; background-color: #f4cf9e; } .hscrollerbar { /*Цвет и высота бегунка горизонтального скроллбара*/ height: 10px; background-color: #b75d2c; } .scrollerjogbox { background: #f4cf9e; width: 10px; height: 10px; top: auto; left: auto; bottom: 0px; right: 0px; } /* Стили контейнера */ #mycustomscroll { width: 300px; height: 250px; overflow: auto; position: relative; background-color: #f4cf9e; margin: 0.3em auto; padding: 15px; } /*Для блок с горизонтальной прокруткой*/ .fixedwidth { width: 550px; /*Ширина прокручивающейся области*/ height: auto; position: relative; color: black; padding: 1px; } <style>
//после всех настроек комментарии, помеченные /**/ можно убрать
Что к чему смотрите на скрине
Вариант с графикой
Код:<style type="text/css"> /* Настраиваем скроллбар */ .vscrollerbase { /*Ширина и фон базы вертикального скроллбара*/ width: 20px; background: url(https://forumstatic.ru/files/0011/e9/e1/87374.png) 0 0 repeat-y; } .vscrollerbar { /*Ширина бегунка вертикального скроллбара*/ width: 20px; } .hscrollerbase { /*Высота и фон базы горизонтального скроллбара*/ height: 20px; background: url(https://forumstatic.ru/files/0011/e9/e1/38169.png) 0 0 repeat-x; } .hscrollerbar { /*Высота бегунка горизонтального скроллбара*/ height: 20px; } .vscrollerbar, .hscrollerbar { padding: 15px; } .vscrollerbarbeg { /*Верхняя стрелка бегунка вертикального скроллбара*/ background: url(https://forumstatic.ru/files/0011/e9/e1/87374.png) -100px 0 no-repeat; width: 20px; height: 12px !important; } .vscrollerbarmid { /*Основная часть бегунка вертикального скроллбара*/ width: 20px; background: url(https://forumstatic.ru/files/0011/e9/e1/87374.png) -20px 0 repeat-y; } .vscrollerbarend { /*Нижняя стрелка бегунка вертикального скроллбара*/ background: url(https://forumstatic.ru/files/0011/e9/e1/87374.png) -100px -12px no-repeat; width: 20px; height: 12px; } .vscrollerbasebeg { /*Верхняя стрелка вертикального скроллбара*/ background: url(https://forumstatic.ru/files/0011/e9/e1/87374.png) -60px 0 no-repeat; width: 20px; height: 22px !important; } .vscrollerbaseend { /*Нижняя стрелка бегунка вертикального скроллбара*/ background: url(https://forumstatic.ru/files/0011/e9/e1/87374.png) -60px -22px no-repeat; width: 20px; height: 22px; } .hscrollerbarbeg { /*Левая стрелка бегунка горизонтального скроллбара*/ background: url(https://forumstatic.ru/files/0011/e9/e1/38169.png) 0 -100px no-repeat; height: 20px; width: 11px !important; } .hscrollerbarmid { /*Основная часть бегунка горизонтального скроллбара*/ background: url(https://forumstatic.ru/files/0011/e9/e1/38169.png) 0 -20px repeat-x; height: 20px; } .hscrollerbarend { /*Правая стрелка бегунка горизонтального скроллбара*/ background: url(https://forumstatic.ru/files/0011/e9/e1/38169.png) -11px -100px no-repeat; height: 20px; width: 11px; } .scrollerjogbox { /*Квадрат между скроллбарами*/ background: url(https://forumstatic.ru/files/0011/e9/e1/38169.png) -22px -100px no-repeat; width: 20px; height: 20px; top: auto; left: auto; bottom: 0px; right: 0px; } .hscrollerbasebeg { /*Левая стрелка горизонтального скроллбара*/ background: url(https://forumstatic.ru/files/0011/e9/e1/38169.png) 0 -60px no-repeat; height: 20px; width: 22px !important; } .hscrollerbaseend { /*Правая стрелка горизонтального скроллбара*/ height: 20px; width: 22px; background: url(https://forumstatic.ru/files/0011/e9/e1/38169.png) -22px -60px no-repeat; } /*Ховеры*/ .vscrollerbar:hover .vscrollerbarbeg { background-position: -100px -23px; } .vscrollerbar:hover .vscrollerbarmid { background-position: -40px 0; } .vscrollerbar:hover .vscrollerbarend { background-position: -100px -35px; } .vscrollerbasebeg:hover { background-position: -80px 0; } .vscrollerbaseend:hover { background-position: -80px -22px; } .hscrollerbar:hover .hscrollerbarbeg { background-position: 0 -120px; } .hscrollerbar:hover .hscrollerbarmid { background-position: 0 -40px; } .hscrollerbar:hover .hscrollerbarend { background-position: -11px -120px; } .hscrollerbasebeg:hover { background-position: 0 -80px; } .hscrollerbaseend:hover { background-position: -22px -80px; } .scrollerjogbox:hover { background-position: -22px -120px; } /* Стили контейнера */ #mycustomscroll { width: 300px; height: 250px; overflow: auto; position: relative; background-color: #E7EADE; margin: 0.3em auto; padding: 15px; } /*Для блок с горизонтальной прокруткой*/ .fixedwidth { width: 550px; /*Ширина прокручивающейся области*/ height: auto; position: relative; color: black; padding: 1px; } <style>
//после всех настроек комментарии, помеченные /**/ можно убрать
Что к чему смотрите на скрине
Обратите внимание на стили контейнера #mycustomscroll. Это стили самого блока с прокруткой:
width: 300px; /*Высота*/
height: 250px; /*Ширина*/
background-color: #E7EADE; /*Фон*/
//можно добавлять другие стили
3. Вставляем блоки с прокруткой (туда, где хотим их видеть, столько раз, сколько нам надо).
//Блок с ТОЛЬКО с вертикальной прокруткой
<div id='mycustomscroll' class='flexcroll'>
Тут длинный текст <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
</div>
//Блок и с горизонтальной и с вертикальной прокруткой
<div id='mycustomscroll2' class='flexcroll'>
<div class="fixedwidth">
Тут длинный текст <br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
</div>
</div>
mycustomscroll - уникальный идентификатор контейнера (может быть любым, на Ваш вкус). Если у Вас контейнеров с прокруткой много, то у каждого должен быть СВОЙ УНИКАЛЬНЫЙ идентификатор.
Демо http://sadhaka.moy.su/html/sadhaka2.htm
Теги: теги, дополнения