Официальный веб -сайт: http://iscrolljs.com/
Самая простая структура DOM IScroll:
<div id = "warper"> <ul> <li> ... </li> <li> ... </li> ... </ul> </div>
Инициализировать IScroll
var myscroll = new iscroll ('#warper', options);Инициализировать настройки
Инициализировать настройки Пример использования:
var myscroll = new iscroll ('#warper', {mousewheel: true, scrollbars: true});Список настроек:
Принадлежит | Имя атрибута | иллюстрировать | значение по умолчанию |
|---|---|---|---|
Основная библиотека Ке | Options.useTransform | Использовать ли свойство преобразования CSS3 | истинный |
Options.UseTransition | Использовать ли свойство перехода CSS3, в противном случае используйте requestAnimationFram вместо этого | истинный | |
Options.hwcompositing | Сообщить ли аппаратное ускорение | истинный | |
Options.bounce | Сообщите ли эластичный эффект анимации, выключите, чтобы ускорить | истинный | |
Основные особенности Основные особенности | Options.click | Чтобы включить событие Click. Рекомендуется отключить эту опцию и включить пользовательские события TAP (Options.tap) | ЛОЖЬ |
Options.disablemouse | Стоит ли отключить обнаружение событий мыши. Если вы знаете, на какую платформу можно запустить, вы можете позволить ей ускоряться. | ЛОЖЬ | |
Options.DisablePointer | Стоит ли выключить обнаружение событий указателя. Если вы знаете, на какую платформу можно запустить, вы можете позволить ей ускоряться. | ЛОЖЬ | |
Options.disableTouch | Чтобы отключить обнаружение событий. Если вы знаете, на какую платформу можно запустить, вы можете позволить ей ускоряться. | ЛОЖЬ | |
Options.EventPassThrough | При использовании горизонтальной оси Iscroll для катания, если вы хотите использовать вертикальную ось системы, чтобы свернуть и вступить в силу на горизонтальной оси, включите. Событие прохождения демонстрации | ЛОЖЬ | |
Options.freescroll | Он используется в основном, когда вступает в силу как вверх, вниз, влево и правое прокрутка, и может быть прокрут в любом направлении. 2D демо -свиток | ЛОЖЬ | |
Options.KeyBindings | Связывать ключевое событие. Ключевые привязки | ЛОЖЬ | |
Options.InvertWheelDirection | Обратное колесо мыши. | ЛОЖЬ | |
Options.momentum | Будет ли включать анимацию запуска, выключите ее, чтобы повысить эффективность. | истинный | |
Options.mousewheel | Слушать соревнования для мыши. | ЛОЖЬ | |
Options.preventDefault | Заблокировать ли событие по умолчанию. | истинный | |
Options.scrollbars | Отображать ли прокрутки по умолчанию | ЛОЖЬ | |
Options.scrollx Options.scroly | Вы можете установить, отображать горизонтальные или вертикальные полосы прокрутки | scrollx false Scrolly True | |
Options.tap | Сообщите ли пользовательские события TAP Вы можете настроить имя события Tap | ЛОЖЬ | |
Прокрутка Полосы прокрутки | Options.scrollbars | Отображать ли прокрутки по умолчанию | ЛОЖЬ |
Options.fadescrollbars | Исчезать ли прокрутки, выключите ее, чтобы ускорить | истинный | |
опции. InteractiveScrollbars | Может ли пользователь перетащить полос прокрутки | ЛОЖЬ | |
Опции | Чтобы исправить размер полосы прокрутки, рекомендуется включить его при настройке полосы прокрутки. | ЛОЖЬ | |
Options.shrinkscrollbars | Смотать ли стержень прокрутки, когда прокрутка превышает границу прокрутки. 'Clip': обрезка прокрутки за пределами «Scale»: масштабирование пропорции пропорции (занимает ресурсы процессора) Неверно: нет усадки, | ЛОЖЬ | |
опции. Индикаторы | Наустает, как должен прокрутить Iscroll, основная реализация полос прокрутки. | ||
Options.Indicators.el | Создайте контейнер для полон прокрутки. Первым элементом в контейнере является индикатор. Например: Индикаторы: { el: document.getElementbyId ('индикатор') } Индикаторы: { EL: '#indicator' } | ||
Options.Indicators.IgnoreBoundaries | Игнорировать границы контейнеров. Установить в True, чтобы установить скорость прокрутки Parallelax Демо | ЛОЖЬ | |
Options.Indicators.Listenx Options.Indicators.Listeny | Индикатор отслеживает прокрутку этого направления, которое может быть установлено в одном или двух направлениях. | истинный | |
Options.Indicators.speedRatiox Options.Indicators.speedRatioy | Скорость индикатора относительно основной полосы прокрутки | 0 | |
Options.Indicators.fade Options.Indicators.Interactive Options.Indicators.Resize Options.Indicators.shrink | Настройки, такие как полосы прокрутки Минимальная демонстрация | ||
Опции.probeType | Iscroll-probe.js необходим для вступления в силу Перевоид: 1 запускается при прокрутке не занят Переворот: 2 запускаются каждый момент при прокрутке Перевоиц: 3 запускается один раз на пиксельный прокрутка | ||
Разделенная страница Snap | Options.snap | Автоматически разделить контейнеры для создания эффекта вращающихся фонарей и т. Д. Options.snap: true // автоматически разделен в зависимости от размера контейнера Options.snap: сегмент EL // в соответствии с элементом | ЛОЖЬ |
Зум зум | Options.zoom | Включить масштаб Лучше всего использовать iscroll-zoom.js Если увеличение размыто, контейнер источника может быть определен как в 2 раза больше, а затем масштаб (0,5) Увеличьте демо | ЛОЖЬ |
Options.zoommax | Максимальный уровень масштабирования | 4 | |
Options.zoommin | Минимальный уровень масштабирования | 1 | |
Options.Startzoom | Начальный уровень масштабирования | 1 | |
Опции.wheelaction | Роликовое действие Установите на «масштаб», вы можете масштабировать с помощью колеса прокрутки | неопределенный | |
Больше настроек | Options.bindtowrapper | Остановить прокрутку, когда курсор или прикосновение превышают контейнер | ЛОЖЬ |
Options.BounceEsing | Эффект эластичной анимации Заданные эффекты: «квадратичный», «циркулярный», «назад», «отскок», «эластичный» (последние два не могут быть выражены через CSS3) Вы также можете настроить эффекты Отказ: { Стиль: «Кубик-бизье (0,0,1,1)», // css3 fn: function (k) {return k; } // При использовании requestAnimationFrame, } | 'Circular' | |
Options.bouncetime | Количество миллисекундов эластичной анимации длится | 600 | |
Options.Deceleration | Скальвинг -импульс замедляется Чем больше он быстрее, рекомендуемая цена не более 0,01 | 0,0006 | |
Options.mousewheelspeed | Мышиная скорость колеса | ||
Опции | Списки, какие элементы не блокируют события по умолчанию; | {Tagname: /^(Input | Textarea | кнопка | Выбрать) $ /} | |
опции | Повторяйте интервал времени IScroll при изменении размера окна | 60 | |
Ключевое привязка | Options.KeyBindings | Слушайте ключевые события для управления Iscroll Например: KeyBindings: { Страница: 33, Pagedown: 34, конец: 35, Главная: 36, Слева: 37, Вверх: 38, Справа: 39, Вниз: 40 } | |
Iscroll5 api:
Принадлежит | Название метода | иллюстрировать |
|---|---|---|
прокрутка | Scrollto (x, y, время, ослабление) | Прокрутите: x, y, событие, метод ослабления X: Int Y: Int Время: инт Ослабление: квадратичный | круговой | назад | отскок | эластичный Смотрите объект iscroll.utils.ease пример: myscroll.scrollto (0, -100, 1000, iscroll.utils.ease.elastic); |
Scrollby (x, y, время, ослабление) | Прокрутите где -нибудь по сравнению с текущей позицией Остальные такие же, как и выше | |
ScrollToElement (EL, время, Offsetx, OffSety, смягчение) | Прокрутите в элемент. EL - необходимый параметр Offsetx/OffSety: смещение относительно элемента EL. Установить, чтобы быть центром экрана Прокрутите в элемент | |
Разделенная страница Snap | GotoPage (x, y, время, смягчение) | Разделите страницу в соответствии с опциями. XY может вступить в силу одновременно. Использовать в сочетании с опциями. |
следующий() prev () | Предыдущая страница, следующая страница Использовать в сочетании с опциями. | |
Зум | Zoom (Scale, x, y, время) | Масштабирующий контейнер Шкала: коэффициент масштабирования |
обновлять | обновить () | Обновить IScroll |
разрушать | разрушать() | Уничтожить Iscroll и сохранить ресурсы |
Iscroll события:
beforescrollstart | Пользователь нажимает на экран, но еще не был инициализирован перед прокруткой |
|---|---|
Scrollcancel | Отменить после инициализации прокрутки |
Scrollstart | Начните прокручивать |
прокрутка | Прокрутка |
прокрутка | Свиток заканчивается |
переезд | Нажмите на левый и правый экран |
Zoomstart | Начать масштабирование |
Zoomend | Конец Zoom |
Пример использования событий:
myscroll = new iscroll ('#warper'); myscroll.on ('Scolllend', Dosomething);Свойства iscroll:
myscroll.x/y | Текущее местоположение |
|---|---|
myscroll.directionx/y | Направление прокрутки в прошлый раз (-1 вниз/справа, 0 остается оригинальным, 1 вверх/слева) |
myscroll.currentpage | Текущая информация SNAP |
myscroll.maxscrollxmyscroll.maxscroly | myscroll.x/y при прокрутке внизу |