Я уже давно адаптировал этот плагин под свои нужды и спешу поделиться данным чудом с вами. Как известно, на чистом css пока что нет кроссбраузерного решения (Нет возможности стилизовать полосу прокрутки для большинства браузеров). Данный великолепный плагин позволит сделать одинаковую стильную, подходящую именно вам, полосу прокрутки, которая будет выглядеть одинаково во всех браузерах. Здорово, правда? Плюсануть к этому ещё то, что можно как угодно настроить эту полосу и даже включить эмуляцию тач (Как на мультитач устройствах, когда вы пальцем хватаете страницу и прокручиваете вниз), после чего можно мышкой хватать страницу и прокручивать вниз, удерживая её нажатой. Золотой слиток я вас презентую, в общем. Наслаждайтесь
Для начала посетите официальный сайт плагина. Там же вы сразу увидите демо: КЛИК
Установка:
После < /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
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
Статья подготовлена Apocalypse. При копировании не забывайте указывать ссылку на источник
