Четверг, 31 Мая 2012 09:56

Стилизация скроллбара своими руками

Written by 
Оцени эту запись
(17 Голоса)

Сейчас часто можно встрелить вертикальную или горизовтальную прокрутку отдельного блока стилизированную особым образом. Ведт если мы зададим блоку определенную высоту (или ширину) и свойство overflow со значениями scroll или auto, то при наличии в нем контента больше высоты (ширины), у него появится прокрутка. Прокрутка имеет опделенный вид, который отличается у разных браузеров. Прокрутка не допускает стилизацию при помощи CSS. Ее можно стилизировать только при помощи Javascript. Для этого существует много готовым плагинов и много статей с подробными объяснениями как эти плагины качать и подключать. Самым популярным является jScrollPane, если интересно ищите и качайте.

 

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

 

 

демо

 

Пример реализации:

 

 

Скрипт:

 

 

<script>
function nice_scroll(a){
a.wrap('<div class="scroll_cont"></div>');
a.wrapInner('<div class="text_inner"></div>');
a.parent('.scroll_cont').prepend('<div class="scrollbar_cont"><div class="scroll_pane"><div class="scroll_line"></div></div></div>');
a.parent('.scroll_cont').append('<div class="scrollbar_cont_bg"></div>');
a.parent('.scroll_cont').css('position','relative');
a.parent('.scroll_cont').width(a.width()).height(a.height());
a.parent('.scroll_cont').css('overflow','hidden');
a.css('overflow-x','hidden').css('overflow-y','scroll');
a.css('padding-right','20px');
a.parent('.scroll_cont').children().children('.scroll_pane').height(a.parent('.scroll_cont').height());
var b = a.children('.text_inner').height();
a.parent('.scroll_cont').children().children('.scroll_pane').children('.scroll_line').height(a.height()/b*100+'%');
a.scroll(function(){
var p = $(this).scrollTop()/b*100;
a.parent('.scroll_cont').children().children('.scroll_pane').children('.scroll_line').animate({top: p+'%'},100);
});
}
</script>
 
 
Элемент a - это будет блок, для которого подключат скрипт. То есть, на странице может быть сразу несколько блоков со стилизированными скроллбарами и для каждого из них будут высчитываться свои значения. Главное, для этого блока должна быть задана фиксированная высота. Браузер сам добавит этому блоку прокрутку, но мы ее спрячем. А вместо нее поставим свой скроллбар.
 
 
a.wrap('<div class="scroll_cont"></div>');
 
 
Оборачиваем нужный блок в контейнер scroll_cont, он будет содержать блок с текстом и сам скроллбар.
 
 
a.wrapInner('<div class="text_inner"></div>');
 
 
Внутрь блока вставляем блок, у которого высота не фиксирована, а зависит от количества контента.
 
 
a.parent('.scroll_cont').prepend('<div class="scrollbar_cont"><div class="scroll_pane"><div class="scroll_line"></div></div></div>');
 
 
В родительский блок вставляем наш скроллбар - scrollbar_cont - контейнер, его сожержащий,  scroll_line - полоса прокрутки, scroll_line - указатель прокрутки.
 
 
a.parent('.scroll_cont').append('<div class="scrollbar_cont_bg"></div>');
 
 
Вставляем дополнительный блок, которому зададим фонов переход из фонового цвета в прозрачность, чтобы при скроле наш текст пропадал плавно. 
 
 
a.parent('.scroll_cont').width(a.width()).height(a.height());
 
 
Родительскому контенту задаем шисоту и ширину, равными параметрам исходного блока.
 
 
a.css('overflow-x','hidden').css('overflow-y','scroll');
 
 
Даваем исходному блоку свойство overflow со значениями hidden по горизонтали и scroll по вертикали.
 
 
a.parent('.scroll_cont').children().children('.scroll_pane').height(a.parent('.scroll_cont').height());
 
 
Задаем скроллбару высоту, равную высоте родительского элемента
 
 
var b = a.children('.text_inner').height();
 
 
Узнаем высоту контента. Мы именно для этого внутрь исходного блока добавляли еще один. Высота контента нам потребуется, чтобы  узнать сколько процентов текста при скроле уехало вверх или спустилось вниз, чтобы указатель скроллбара переместить на такой же процент.
 
 
a.parent('.scroll_cont').children().children('.scroll_pane').children('.scroll_line').height(a.height()/b*100+'%');
 
 
Это для красоты. Указателю скроллбара залаем высоту зависящую от количества контента, втиснутого в фискированную область. Чем больше контента, тем меньше будет этот показатель. Такая же штука делается в браузерах.
 
 
 a.scroll(function(){
var p = $(this).scrollTop()/b*100;
a.parent('.scroll_cont').children().children('.scroll_pane').children('.scroll_line').animate({top: p+'%'},100);
});
 
 
При скроле контента исходного блока, мы высчитываем на сколько процентов от количества контента прокрутился текст и опускаем указатель на столько процентов вниз. Количество пикселей, на которое сместился текст по вертикали, нам показывает функция  scrollTop(). Для горизонтального смещения нужно использовать аналогичную функцию scrollLeft().
 
 
Теперь смотрим стили:
 
 
.scrollbar_cont {position: absolute; top: 0px; right: 0px; width: 20px; height: 100%; z-index: 7;}
.scroll_pane {position: absolute; top: 0px; right: 0px; width: 4px; height: 100%; background: #ccc;}
.scroll_line {position: absolute; top: 0px; left: 0px; width: 4px; height: 20px; background: #222;}
.scrollbar_cont_bg {background: url(images/scroll_cont_bg.png) top left repeat-x; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 30px}
 
 
 
.scrollbar_cont {position: absolute; top: 0px; right: 0px; width: 20px; height: 100%; z-index: 7;}
 
 
Контейнер скроллбара располагаем сверху справа с абсолютным позиционированием. Задаем ему ширину. Высоту высчитывает скрипт.
 
 
.scroll_pane {position: absolute; top: 0px; right: 0px; width: 4px; height: 100%; background: #ccc;}
 
 
Это стилизация полосы прокрутки. Она тоже верху справа. Задаем ей высоту 100% и нужную ширину. Фоном можно задать цвет или картинку. Это уже зависит от дизайна.
 
 
.scroll_line {position: absolute; top: 0px; left: 0px; width: 4px; height: 20px; background: #222;}
 
 
Это стилизация указателя прокрутки. Задаем ширину, высоту считает скрипт в зависимости от размеров контента. Стилизируем цветом или картинкой.
 
 
.scrollbar_cont_bg {background: url(images/scroll_cont_bg.png) top left repeat-x; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 30px}
 
 
Этот блок не обязательный. Я ему задала фоном картинку перехода от белого (мой фон) к прозрачному, чтобы текст не обрезался, а плавно исчезал.
 
 

Комментарии  

 
-2 #2 kat-khmara 18.03.2014 12:26
Да, конечно! Нужно добавить обработку событий для mouseup, mousedown, mousemove.
Цитировать
 
 
-2 #1 Максим 16.03.2014 11:25
спасибо за сатью

не ок только то, что за ползунок (scroll_line) нельзя потянуть, зажав его мышкой.. это можно доработать?
Цитировать
 

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов