Телепорт
» » » Nicescroll - альтернатива полос прокрутки

Nicescroll - альтернатива полос прокрутки

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 (если поддерживается браузером). Специальное предложение - домашняя метеостанция для вас!

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


javascript
Для работы плагина подключаем библиотеку jQuery не ниже версии 1.5.x (можно попробовать и версии 1.4.x)
<script src="jquery.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)



Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...