Главная » 2013 » Июль » 29 » Стилизация полосы прокрутки (кроссбраузерно) (Javascript)
29.07.2013, 15:26

Стилизация полосы прокрутки (кроссбраузерно)




Данный плагин позволит сделать одинаковую стильную, подходящую именно вам, полосу прокрутки, которая будет выглядеть одинаково во всех браузерах.
Также можно как угодно настроить эту полосу и даже включить эмуляцию тач (Как на мультитач устройствах, когда вы пальцем хватаете страницу и прокручиваете вниз), после чего можно мышкой хватать страницу и прокручивать вниз, удерживая её нажатой.

Установка:

После < /head > на нужных страницах вставляйте:
Код

<script src="/js/jquery.nicescroll.plus.js"></script>  
<script>  
$(document).ready(function() {
$("html").niceScroll({  
cursorborder: '1px solid #555', // Стилизуем рамку у полосы прокрутки  
scrollspeed: 30,
mousescrollstep:60,
cursorwidth: '10px' // Ширина полосы прокрутки  
});
});
</script>

Как я уже говорил, у плагина много настроек. Специально для пользователей apo-ucoz я русифицирую описание

cursorcolor - цвет полосы прокрутки. По-умолчанию "#000000"

cursoropacitymin - прозрачность полосы прокрутки при неактивном состоянии. По-умолчанию значение 0. Можете выставить своё значение от 0 до 1

cursoropacitymax - непрозрачность полосы прокрутки в активном режиме. По-умолчанию 1 (Полоска полностью непрозрачна)

cursorwidth - ширина полосы прокрутки (Стандартно 5 пикселей). Можете прописать 5 или же "5px"

cursorborder - css свойство рамки вокруг полосы прокрутки. Стандартно "1px solid #fff"

cursorborderradius - закругление уголков полосы прокрутки. Стандартно "4px"

zindex - z-index полосы прокрутки. Стандартно 9999

scrollspeed - плавность прокрутки при включенной эмуляции плавной прокрутки. Стандартно 60

mousescrollstep - скорость прокрутки при включенной эмуляции плавной прокрутки. Стандартно 40 (пикселей) за один поворот колеса

touchbehavior - эмуляция мультитач скрина. Стандартно отключена (default:false)

hwacceleration - использовать аппаратное ускорение, если это возможно. Стандартно вкл (default:true)

boxzoom - включение приближения для блочных элементов. Отключено по-стандарту (default:false)

dblclickzoom - (только если включено приближения для блочных элементов) активация приближения только по двойному клику по блоку. Стандартно вкл (default:true)

gesturezoom - (только если включено приближения для блочных элементов и вы зашли с мультитач устройства) активировать приближение при прикасании к блоку. Стандартно вкл (default:true)

grabcursorenabled - показывать иконку "схватить" для блоков, если включена эмуляция тачскрин. Стандартно вкл (default:true)

autohidemode - каким образом скрывать полосу прокрутки, true=default - скрывать полосу прокрутки / false = не скрывать

background - изменить css для подложки полосы прокрутки, стандартно ""

iframeautoresize - автоматически изменять размер фреймов при загрузке их содержимого. Стандартно вкл (default:true)

cursorminheight - установить минимальную высоту полосы прокрутки. Стандартно 20 пикселей (default:20)

preservenativescrolling - дать возможность прокручивать элементы горизонтально, подменяя событие прокрутки колёсиком мышки. Стандартно вкл (default:true)

railoffset - задать оффсет значение для горизонтальной прокрутки, к примеру сверху, слева (default:false)

bouncescroll - включать ли элемент подпрыгивания страницы при достижении верхней или нижней страницы, как на мультитач устройствах. Стандартно выкл (default:false)

spacebarenabled - проматывать страницу вниз при нажатии пробела. Стандартно вкл (default:true)

railpadding - отступы для горизонтальной полосы прокрутки (default:{top:0,right:0,left:0,bottom:0})

disableoutline - убрать окантовку при клике по полосе прокрутки (default:true)

horizrailenabled - активировать управление горизонтальной прокруткой (default:true)

railalign - с какой стороны полоса прокрутки. Стандартно справа (defaul:"right")

railvalign - положение горизонтальной прокрутки. Стандартно снизу (defaul:"bottom")

enabletranslate3d - плагин может использовать CSS3 свойства (default:true)

enablemousewheel - перехватывать события колёсика мышки (default:true)

enablekeyboard - отслеживать события клавиатуры (default:true)

smoothscroll - прокручивать страницу с эффектами плавной остановки и запуска (default:true)

sensitiverail - клик по подложке полосы прокрутки прокручивает страницу (default:true)

enablemouselockapi - использовать API событий мышки (используется при перемещении объектов) (default:true)

cursorfixedheight - использовать фиксированную высоту полосы прокрутки (default:false)

hidecursordelay - задержка до исчезновения полосы прокрутки (default:400)

directionlockdeadzone - мёртвая зона до участка блокировки. Хз, что за функция такая (default:6)

nativeparentscrolling - отслеживать конец страницы (default:true)

enablescrollonselection - включить автопрокрутку страницы по мере выделения текста (default:true)

Скрипт из прикреплённого архива залейте в папку js
Материал взят с сайта infoscript.ru
Теги: Скачать Стилизация полосы прокрутки (кроссбраузерно)
Скачать "Стилизация полосы прокрутки (кроссбраузерно)"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: apo-ucoz.com
Категория: JavaScript's | Просмотров: 2185 | Добавил: sold93 | Рейтинг: 0.0/0 |
Теги: (кроссбраузерно, стилизация, полосы, прокрутки
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]