регистрация
856материалов
3280комментариев
234темы на форуме
6811пользователей

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


Описание:

Данный плагин позволяет придать стандартным полосам прокрутки современный стиль, внешне похожий на используемый в браузерах планшетов и смартфонов. Он будет хорошей альтернативой стандартного браузерного скроллбара на компьютере, так как не грузит страницы, поддерживается всеми версиями браузеров и будет исчезать в неактивном состоянии. NiceScroll - это стильный скроллбар, который понравится многим uCoz пользователям и подойдет под любой дизайн сайтов.

Особенности:

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

1. Качаем архив и загружаем в фм в папку /js

2. Открываем нижнюю часть сайта и вставляем код:
Код
<script src="/js/jquery.nicescroll.min.js"></script>

Ниже вставляем:
Код
<script>
        $(document).ready(function() {          
          $("body").niceScroll();
          $("#divexample1").niceScroll();
          $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#333",boxzoom:true});
          $("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
        });
</script>


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

  • 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)
  • horizrailenablednicescroll может управлять горизонтальным скроллом (по умолчанию:true)
  • railalign, выравнивание вертикальной рейки (по умолчанию:"right")
  • railvalign, выравнивание горизонтальной рейки (по умолчанию:"bottom")
  • enabletranslate3dnicescroll может использовать CSS translate для прокручиваемого контента (по умолчанию:true)
  • enablemousewheelnicescroll может управлять событиями колесика мыши (по умолчанию:true)
  • enablekeyboardnicescroll может управлять событиями клавиатуры (по умолчанию:true)
  • smoothscroll, плавный скролл (по умолчанию:true)
  • sensitiverail, клик по рейке вызовет прокрутку (по умолчанию:true)
Для редактирования откройте в корне файл скрипта и ищите нужные элементы. Надеюсь разберетесь что к чему.


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 06.03.2017 в 21:00
Материал просмотрен: 635 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 6 комментариев

Пожаловаться
Сказать спасибо

6 комментариев


Unbearable
Debora Richter @Unbearable 06.03.2017 21:071
+2
Спасибо!!!!! Давно такой скрипт искала, но они все не понятны мне в установке были, а это очень легок
S
Sergey @Sarafan 06.03.2017 21:102
-4
Мдя, круто капировать материалы и выдовать за свои
Ромчик
Если Вы себя будете так дальше вести, то я Вам на месяц ограничу доступ к сайту :-)
S
Sergey @Sarafan 09.03.2017 01:094
-2
За правду заблокируете?
qtqxmk225
Vasily DD @qtqxmk225 09.03.2017 13:575
0
Не скачивается
mitjaginsergeyy
Нормально все скачивается
avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0