Главная » 2013 » Март » 31 » NiceScroll - полоса прокрутки (Javascript)
31.03.2013, 09:17

NiceScroll - полоса прокрутки





Плагин nicescroll позволяет придать стандартным полосам прокрутки стиль, внешне похожий на используемый в ios (как у apple). Поддерживается изменение как вертикальной, так и горизонтальной полосы прокрутки.

Поддерживаются прокрутки в DIV-ах, iframe-ах, textarea и body.

Совместимость с браузерами: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE6+.

Совместимость с мобильными усройствами: iPad, iPhone, iPod, Android 2.2+, Blackberry и Playbook (WebWorks/Table OS), Windows Phone 7.5 Mango.

Совместимость с устройствами ввода, как сенсорная мышь или перо: window surface, chrome desktop на сенсорных ноутбуках.

Совместимость с дву-направленными мышками: Apple Magic Mouse, Apple Mouser (с дву-направленным колесом), PC мышки с дву-направленным колесом (если браузер поддерживает их).

В современных браузерах реализовано аппаратное ускорение. Использование animationFrame для более плавной прокрутки и сохранения CPU (если поддерживается браузером).

Для работы плагина подключаем библиотеку jQuery не ниже версии 1.5.x (можно попробовать и версии 1.4.x)
Код
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

После вызова jQuery поместите и вызов самого плагина (и загрузите картинку zoomico.png туда же, куда загрузили и скрипт плагина):
Код
<script src="jquery.nicescroll.js"></script>

Примеры инициализации:
Стилизуем скроллбар всего документа (предпочтение отдаем html элементу)
Код
$(document).ready(  
  function() {  
  $("html").niceScroll();  
  }  
  );

Пример с возвращенным объектом:
Код

var nice = false;  
  $(document).ready(  
  function() {  
  nice = $("html").niceScroll();  
  }  
  );

Стилизация скролла у DIV и изменение цвета ползунка:
Код
$(document).ready(  
  function() {  
  $("#thisdiv").niceScroll({cursorcolor:"#00F"});  
  }  
  );

DIV с оболочкой (wrapper), образуемый двумя дивами, первый это окно просмотра, второй это контент:
Код
$(document).ready(  
  function() {  
  $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});  
  }  
  );

Получение объекта nicescroll
Код
var nice = $("#mydiv").getNiceScroll();

Скрыть скроллбары:
Код
$("#mydiv").getNiceScroll().hide();

Проверка ресайза скроллбаров:
Код
$("#mydiv").getNiceScroll().resize();


Доступные опции:

cursorcolor - изменение цвета курсора в hex формате: по умолчанию "#000000"
cursoropacitymin - изменение прозрачности курсора, когда он не активен (скроллбар "hidden" скрыт), диапазон от 1 до 0, по умолчанию 0 (скрыт)
cursoropacitymax - изменение прозрачности курсора в активном состоянии (скроллбар "visible" виден), диапазон от 1 до 0, по умолчанию 1 (виден полностью)
cursorwidth - ширина курсора в пикселях, по умолчанию 5 (написать можно и так "5px")
cursorborder - определяет границу курсора, по умолчанию "1px solid #fff"
cursorborderradius - определяет радиус границы курсора в пикселях, по умолчанию "4px"
zindex - изменение z-index для прокуртки DIV, по умолчанию 9999
scrollspeed - скорость прокрутки, по умолчанию 60
mousescrollstep - скорость прокрутки с помощью колесика мыши, по умолчанию 40 (pixel)
touchbehavior - включение возможности прокрутки cursor-drag так же как и на touch устройствах, по умолчанию false
hwacceleration - использование аппаратного ускорения, если поддерживается, по умолчанию true
boxzoom - включение zoom контейнера с контентом, по умолчанию false
dblclickzoom - (только когда boxzoom=true) активация zoom после двойного клика по контейнеру, по умолчанию true
gesturezoom - (только когда boxzoom=true и на touch устройствах) zoom активируется, когда курсор вне/над контейнером, по умолчанию true
grabcursorenabled - отображать "grab" иконку для div с touchbehavior = true, по умолчанию true
autohidemode - скрывать курсор, true=default / "cursor" = скрывать только курсор / false = не скрывать
background, изменение CSS для фона, по умолчанию ""
iframeautoresize, авторесайз iframe на load event (по умолчанию:true)
cursorminheight, установить минимальную высоту курсора в пикселях (по умолчанию:20)
preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (по умолчанию:true)
railoffset, вы можете добавить смещение top/left для рейки (траектория по которой бегает ползунок) (по умолчанию:false)
bouncescroll, включение подпрыгивания скролла в конце контента (только аппаратное ускорение) (по умолчанию:false)
spacebarenabled, включение прокрутки страницы вниз, когда нажата клавиша "пробел" (по умолчанию:true)
railpadding, установка отступов для рейки (по умолчанию:{top:0,right:0,left:0,bottom:0})
disableoutline, для браузера chrome, отключение outline (оранжевая подсветка), когда выбран DIV с nicescroll (по умолчанию:true)
horizrailenabled, nicescroll может управлять горизонтальным скроллом (по умолчанию:true)
railalign, выравнивание вертикальной рейки (по умолчанию:"right")
railvalign, выравнивание горизонтальной рейки (по умолчанию:"bottom")
enabletranslate3d, nicescroll может использовать CSS translate для прокручиваемого контента (по умолчанию:true)
enablemousewheel, nicescroll может управлять событиями колесика мыши (по умолчанию:true)
enablekeyboard, nicescroll может управлять событиями клавиатуры (по умолчанию:true)
smoothscroll, плавный скролл (по умолчанию:true)
sensitiverail, клик по рейке вызовет прокрутку (по умолчанию:true)
Материал взят с сайта infoscript.ru
Теги: Скачать NiceScroll - полоса прокрутки
Скачать "NiceScroll - полоса прокрутки"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://areaaperta.com/nicescroll/index.html
Категория: JavaScript's | Просмотров: 3182 | Добавил: antisept | Рейтинг: 5.0/3 |
Теги: полоса, NiceScroll, прокрутки
Всего комментариев: 3
1 -=WaMpIr=-   (31.03.2013 09:28)
Аватар пользователя
Демки не хватает. cry

2 -=WaMpIr=-   (31.03.2013 09:34)
Аватар пользователя
Демка в конце статьи оказца. biggrin
Подобный скрипт я сделал давно, вот только есть некоторые косяки, которые лень доделать/исправить. И тут появление слишком резкое, неприятно для глаза.

3 map   (31.03.2013 18:42)
Аватар пользователя
Отличный nicescroll

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]