Техническая поддержка сервиса Quadro.Boards

sadhaka

В последнее время очень много желающих каким-то образом кастомизировать скроллбары на странице. Желание вполне естественное - все настраивается, а скроллбар - не настраивается. Непорядок! Давайте настроим скроллбар (кроссбраузерно).

Кастомизировать удастся только скроллбары внутри сайта, но не браузерный скролл (можно настроить и его, но об этом отдельно). Соответственно, любой блок с прокруткой на форуме можно легко оформить под дизайн форума.
Все ниже приведенное лучше ставить туда, где у Вас будут стоять блоки с прокруткой (хтмл-верх, хтмл-низ, объявление, форма ответа, описание форума). Но если у Вас много таких блоков некоторые части можно проставить один раз и этого будет достаточно, чтобы работало везде.

1. Хтмл-верх (если у Вас только одно место, где стоят блоки с прокруткой, ставьте туда, где блоки). Ставите один раз, сколько бы блоков у Вас не было.
jQuery-плагин

Код:

<script type="text/javascript" src="http://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(http://forumstatic.ru/files/0011/e9/e1/87374.png) 0 0 repeat-y;
                }
                .vscrollerbar { /*Ширина бегунка вертикального скроллбара*/
                    width: 20px;
                }
                .hscrollerbase { /*Высота и фон базы горизонтального скроллбара*/
                    height: 20px;
                    background: url(http://forumstatic.ru/files/0011/e9/e1/38169.png) 0 0 repeat-x;
                }
                .hscrollerbar { /*Высота бегунка горизонтального скроллбара*/
                    height: 20px;
                }
                .vscrollerbar, .hscrollerbar {
                    padding: 15px;
                }
                .vscrollerbarbeg { /*Верхняя стрелка бегунка вертикального скроллбара*/
                    background: url(http://forumstatic.ru/files/0011/e9/e1/87374.png) -100px 0 no-repeat;
                    width: 20px;
                    height: 12px !important;
                }
                .vscrollerbarmid { /*Основная часть бегунка вертикального скроллбара*/
                    width: 20px;
                    background: url(http://forumstatic.ru/files/0011/e9/e1/87374.png) -20px 0 repeat-y;
                }
               .vscrollerbarend { /*Нижняя стрелка бегунка вертикального скроллбара*/
                    background: url(http://forumstatic.ru/files/0011/e9/e1/87374.png) -100px -12px no-repeat;
                    width: 20px;
                    height: 12px;
                }
                .vscrollerbasebeg { /*Верхняя стрелка вертикального скроллбара*/
                    background: url(http://forumstatic.ru/files/0011/e9/e1/87374.png) -60px 0 no-repeat;
                    width: 20px;
                    height: 22px !important;
                }
               .vscrollerbaseend { /*Нижняя стрелка бегунка вертикального скроллбара*/
                    background: url(http://forumstatic.ru/files/0011/e9/e1/87374.png) -60px -22px no-repeat;
                    width: 20px;
                    height: 22px;
                }

                .hscrollerbarbeg { /*Левая стрелка бегунка горизонтального скроллбара*/
                    background: url(http://forumstatic.ru/files/0011/e9/e1/38169.png) 0 -100px no-repeat;
                    height: 20px;
                    width: 11px !important;
                }
                .hscrollerbarmid  { /*Основная часть бегунка горизонтального скроллбара*/
                    background: url(http://forumstatic.ru/files/0011/e9/e1/38169.png) 0 -20px repeat-x;
                    height: 20px;
                }
                .hscrollerbarend { /*Правая стрелка бегунка горизонтального скроллбара*/
                    background: url(http://forumstatic.ru/files/0011/e9/e1/38169.png) -11px -100px no-repeat;
                    height: 20px;
                    width: 11px;
                }
               .scrollerjogbox { /*Квадрат между скроллбарами*/
                    background: url(http://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(http://forumstatic.ru/files/0011/e9/e1/38169.png) 0 -60px no-repeat;
                    height: 20px;
                    width: 22px !important;
                }
                .hscrollerbaseend { /*Правая стрелка горизонтального скроллбара*/
                    height: 20px;
                    width: 22px;
                    background: url(http://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

Добавлено спустя 24 дня 12 часов 48 минут 12 секунд:
Для того, что кастомизировать cоde-box (а не свои блоки) ставим скрипт и jquery-плагин в хтмл-низ
//обязательно так!

<script>$('.scrollbox').wrapInner('<div class="fixedwidth"></div>').addClass("flexcroll");</script>
<script type="text/javascript" src="http://forumstatic.ru/files/0011/e9/e1/48134.js">/script>

и стили любого из понравившихся вариантов.

Теги: скроллбар, прокрутка

+1

BlackSparrow · [1994-01-10]

sadhaka,
А скрипт может не работать по каким-то причинам, не зависящим от пользователя?
Поставил к себе на форум, все по инструкции вроде...проверял работоспособность скрипта по скроллбару code-box'a.
Пробовал впихнуть везде, что в вверх, что вниз, что в форму ответа. Результата никакого, работать не желает

Гляньте, будьте добры, может я где-то сам накосячил?

0

sadhaka

BlackSparrow
А нужные классы/ид кодбоксу как добавляли?

0

BlackSparrow · [1994-01-10]

sadhaka
Аааа, прошу прощения, я не так понял ваш мануал.
Вернее, пропустил один момент.

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

Еще такой вот вопрос.

sadhaka написал(а):

...но не браузерный скролл (можно настроить и его, но об этом отдельно).

Браузерный скролл можно настроить кроссбраузерно?

0

sadhaka

BlackSparrow написал(а):

Браузерный скролл можно настроить кроссбраузерно?

можно

BlackSparrow написал(а):

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

Угу, я предполагала, что это потребуется ) завтра допишу

0

sadhaka

BlackSparrow
Добавила мануал как кастомизировать кодбокс, посмотреть можно тут http://sadhaka.rusff.me/viewtopic.php?id=4&p=2#p133

+1

Nikolay345

У меня вопрос что бы блоки были по бокам а не один под одним ? мой форум
я хочу примерно что бы было так как на этом форуме http://narutowoc.anihub.ru/

0

sadhaka

Nikolay345
эмн, так?

<table><tbody><tr>
<td>1 блок</td>
<td>2 блок</td>
<td>3 блок</td>
</tr></tbody></table>

0

Игральные Кости

Хочу поделиться другим кодом. Нашла его на сайте англоязычной поддержки mybb. Он удобен тем, что меняет вообще все скроллбары сайта.
Ставить в Структура style.css. Я поставила в самый конец. Думаю, так удобнее будет.

Код:

::-webkit-scrollbar {
    background: #d8d8d8; 
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-left: 0px solid #444444;

}
::-webkit-scrollbar-thumb {
    background: #4b4b4b; 
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.27); 
}
::-webkit-scrollbar-thumb:hover {
    background: #353535; 
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0,0,0,0.6); 
}
@-webkit-keyframes headershine {
    0%        { opacity: 0.4; }
    50%        { opacity: 1; }
    100%     { opacity: 0.4; }
}

Отредактировано Игральные Кости (07.10.2015 11:50:38)

0

sadhaka

Игральные Кости
Это не кроссбраузерный вариант. Будет работать только на движке webkit

0

FAQ по самостоятельному составлению HTML-таблицы и Заказ Таблиц (2)	Оформление форумов	10.04.2017
Общие вопросы (7)	Поток сознания	30.12.2015
О разделе «Оформление форумов» + навигация по разделу	Оформление форумов	26.12.2012
Вопросы и Запросы по Скриптам 3	Скрипты и дополнения	17.02.2016
Вопросы по оформлению форума, дизайну и css (4)	Оформление форумов	21.01.2016

Техническая поддержка сервиса Quadro.Boards

Меню навигации

Пользовательские ссылки

Объявление

Новости сервиса

О форуме

Полезные ссылки

Информация о пользователе

Настраиваем скроллбар

Сообщений 1 страница 10 из 10

Поделиться108.07.2013 23:22:37

Поделиться230.07.2013 19:02:07

Поделиться330.07.2013 21:36:55

Поделиться430.07.2013 22:49:41

Поделиться530.07.2013 22:53:17

Поделиться602.08.2013 12:11:49

Поделиться731.01.2014 21:42:26

Поделиться801.02.2014 10:18:15

Поделиться906.10.2015 23:32:54

Поделиться1009.10.2015 10:50:01

Похожие темы