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

Объявление

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

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Настраиваем скроллбар


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

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

1

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

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

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

Код:
<script type="text/javascript" src="http://co.forum4.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>

//после всех настроек комментарии, помеченные /**/ можно убрать

Что к чему смотрите на скрине

Скрин настроек

http://s5.uploads.ru/gb1Im.jpg


Вариант с графикой

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

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

//после всех настроек комментарии, помеченные /**/ можно убрать

Что к чему смотрите на скрине

Скрин настроек

http://s4.uploads.ru/YG5Mc.jpg

Обратите внимание на стили контейнера #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://co.forum4.ru/files/0011/e9/e1/48134.js">/script>

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

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

+1

2

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

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

0

3

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

0

4

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

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

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

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

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

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

0

5

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

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

можно :)

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

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

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

0

6

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

+1

7

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

0

8

Nikolay345
эмн, так?

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

0

9

Хочу поделиться другим кодом. Нашла его на сайте англоязычной поддержки 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

10

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

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Настраиваем скроллбар


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC