Jump to content

Своя полоса прокрутки


Recommended Posts

Хочу поделиться приятной фишкой, которая украсит Ваш интернет-магазин вне всякого сомнения.  ;)

 

 

Плагин nicescroll позволяет придать стандартным полосам прокрутки стиль внешне похожий на используемый в iOS. Поддерживается изменение как вертикальной, так и горизонтальной полосы прокрутки.
Поддерживаются прокрутки в 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 мышки с дву-направленным колесом (если браузер поддерживает их).
В современных браузерах реализовано аппаратное ускорение. Использование animation frame для более плавной прокрутки и сохранения CPU (если поддерживается браузером)
 
Особенности:
  • Простая установка и активация, работает без модификации Вашего кода.
  • Стильный скроллбар, который не съедает полезную область Вашего окна браузера, как это делают стандартные полосы прокрутки в браузере.
  • Возможность стилизации скроллбара всей страницы, т.е. тега body.
  • Во всех браузерах Вы можете прокручивать: с помощью перетаскивания курсора, колесиком мыши (скорость настраивается), клавишами навигации (клавиши управления курсором, pageup, pagedown, home/end)
  • Плавная прокрутка (скорость настраивается)
  • Функция масштабирования
  • Аппаратное ускорение прокрутки
  • Поддержка animation frame для плавной прокрутки и экономии ресурсов CPU
  • Режим перетаскивания скролла, как на сенсорных устройствах
  • Протестирован со всеми основными десктопными и мобилными браузерами
  • Поддержка touch устройств
  • Поддержка устройств с мультитач (IE10 с MSPointer)
  • Полностью настраиваемый скроллбар
  • Родные scroll события, так же работают
  • Полностью интегрирован с jQuery
  • Совместим с jQuery UI, jQuery Touch и jQuery Mobile.

 

После вызова jQuery в index.tpl шаблона поместите вызов самого плагина и загрузите картинку zoomico.png туда же, куда загрузили и скрипт плагина:

 

 

<script src="design/{$settings->theme}/js/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).

Страница плагина: http://code.google.com/p/jquery-nicescroll/

 

P.S. Измените расширение файла jquery.nicescroll.txt на .js (у меня отсутствуют права на загрузку этого типа файлов на форум)

 

P.P.S. Для тех, кому не очень понятно, но очень хочется:

 

Шаг 1:

 

Загружаем файл jquery.nicescroll.js (не забываем изменить расширение) в папку design/Ваш шаблон/js (туда же загружаем файл zoomico.png).

 

Шаг 2:

 

В index.tpl Вашего шаблона после строчек:

{* JQuery *}
<script src="js/jquery/jquery.js"  type="text/javascript"></script>
<script type="text/javascript"></script>

 

вставляем:

<script src="design/{$settings->theme}/js/jquery.nicescroll.js"></script>

 

Перед закрывающим тегом </head> вставляем:

<script type="text/javascript">
      $(document).ready(
             function() {
             $("html").niceScroll();
             }
      );
</script>

 

Ну вот и всё, теперь Вы счастливый обладатель собственного анимированного скроллбара.

Ну и пробуйте описанные выше функции.

 

Удачи!  :P

 

P.P.P.S. zoomico.png - миниатюра в аттаче, сохраните её и следуйте инструкциям.

post-3839-0-21151700-1366809946_thumb.png

jquery.nicescroll.txt

Link to post
Share on other sites

У себя отредактировал настройки плагина в jquery.nicescroll.js следующим образом:

  var _globaloptions = {
      zindex:"99999",
      cursoropacitymin:0,
      cursoropacitymax:1,
      cursorcolor:"#404040",
      cursorwidth:"10px",
      cursorborder:"0px solid #505050",
      cursorborderradius:"0px",
      scrollspeed:60,
      mousescrollstep:8*3,
      touchbehavior:true,
      hwacceleration:true,
      usetransition:true,
      boxzoom:true,
      dblclickzoom:true,
      gesturezoom:true,
      grabcursorenabled:true,
      autohidemode:true,
      background:"",
      iframeautoresize:true,
      cursorminheight:32,
      preservenativescrolling:true,
      railoffset:false,
      bouncescroll:true,
      spacebarenabled:true,
      railpadding:{top:0,right:0,left:0,bottom:0},
      disableoutline:true,
      horizrailenabled:true,
      railalign:"right",
      railvalign:"bottom",
      enabletranslate3d:true,
      enablemousewheel:true,
      enablekeyboard:true,
      smoothscroll:true,
      sensitiverail:true,
      enablemouselockapi:true,
//      cursormaxheight:false,
      cursorfixedheight:false,      
      directionlockdeadzone:6,
      hidecursordelay:400,
      nativeparentscrolling:true,
      enablescrollonselection:true,
      overflowx:true,
      overflowy:true,
      cursordragspeed:0.3,
      rtlmode:false,
      cursordragontouch:true
  }

 

И внёс изменения в глобальные стили CSS шаблона для правильной работы плагина (в коде только те параметры, которые нужно изменить, остальное оставляйте как есть):

html,
body {
	width: auto;
        margin: auto;
	height: auto;
        cursor: default;
}

 

Теперь можно дополнительно прокручивать страницу вниз удерживая пробел и таскать содержимое окна курсором как в touch девайсах. :)

Link to post
Share on other sites

скинь ссылку на пример как выглядит скролл

Есть же ссылка на официальную страницу, там полно примеров. К тому же, установка плагина занимает не более 2-х минут, можно было давно всё посмотреть на собственном сайте вживую.

Link to post
Share on other sites
  • 5 months later...

Поставил по 2-му варианту, для тех кому хочется  :P  и лень возится.

А как увеличить вширь правую полосу прокрутки? Это хорошо если мышкой управлять, а какого у кого ноут без мыши и тачем полноценно пользоваться не умеет :blink:

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...