Стилизация полосы прокрутки CODE с плагином NiceScroll

Стилизация полосы прокрутки CODE с плагином NiceScroll 1.0

Нет прав для скачивания
Совместимость с XenForo
  1. 1.0
  2. 1.1
  3. 1.2
  4. 1.3
Screen_42.gif

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

Скачиваем архив с файлом jquery.nicescroll.js и закидываем его в папку js. Открываем файл page_container_js_head, добавляем в него:
Код:
<script src="js/jquery.nicescroll.js"></script>
<script>
$(document).ready(function() {
$(".code").niceScroll({cursorborder:"1px solid #E0E0E0",cursorcolor: '#BFBFBF',cursorfixedheight:'60'});
});
</script>



В принципе можно использовать не только для CODE, но это уже дело Вашей фантазии.
Плагин имеет еще кучу настроек, здесь можно их посмотреть:
  • cursorcolor — цвет полосы прокрутки. По-умолчанию «#000000″
  • cursoropacitymin — прозрачность полосы прокрутки при неактивном состоянии. По-умолчанию значение 0. Можете выставить своё значение от 0 до 1
  • cursoropacitymax — непрозрачность полосы прокрутки в активном режиме. По-умолчанию 1 (Полоска полностью непрозрачна)
  • cursorwidth — ширина полосы прокрутки (Стандартно 5 пикселей). Можете прописать 5 или же «5px»
  • cursorborder — css свойство рамки вокруг полосы прокрутки. Стандартно «1px solid #fff»
  • cursorborderradius — закругление уголков полосы прокрутки. Стандартно «4px»
  • zindex — z-index полосы прокрутки. Стандартно 9999
  • scrollspeed — плавность прокрутки при включенной эмуляции плавной прокрутки. Стандартно 60
  • mousescrollstep — скорость прокрутки при включенной эмуляции плавной прокрутки. Стандартно 40 (пикселей) за один поворот колеса
  • touchbehavior — эмуляция мультитач скрина. Стандартно отключена (default:false)
  • 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)
Автор
Skaiman
Скачивания
17
Просмотры
508
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя Skaiman

Поделиться ресурсом

Назад
Сверху Снизу