краткое содержание
Эта версия Iscroll 4 полностью переписывает оригинальный код структуры Iscroll. Этот проект был создан полностью из -за широкого использования мобильных браузеров Webkit (таких как iPhone, iPad, Android)
Предусмотрен локализованный способ скольжения содержимого элемента, который определяет высоту и ширину. К сожалению, в этом случае страницы всех веб -приложений не могут содержать заголовок, конец страницы или прокручиваемое контент с позицией: абсолютно.
Средняя зона.
Тем не менее, последний пересмотр системы Android уже может поддерживать эту функцию (хотя поддержка не особенно хороша), и Apple, похоже, неохотно применяет событие слайда с одним пальцем к элементу DIV.
В дополнение к функциям предыдущих версий IScroll, IScroll 4 также включает в себя следующие функции:
(1) Зум (пинч/масштаб)
(2) Потянуть вверх/вниз, чтобы обновить
(3) Улучшение скорости и производительности
(4) Точно захватить элементы
(5) Пользовательская прокрутка
Дружественные советы: Iscroll 4 не является простой альтернативой IScroll 3, и документация API уже отличается. Также учитывая, что эта версия находится в бета -версии, некоторые API могут иметь незначительные изменения.
Руководство пользователя
В этом документе вы найдете много примеров, чтобы научить вас, как быстро начать с библиотеки Script Iscroll. Может быть немного скучно ссылаться на демонстрационный пример в статье и внимательно прочитать этот документ, но эта статья является сущностью библиотеки сценариев.
Iscroll должен инициализировать элементы, которые будут прокручивать, и не ограничивает количество элементов, используя IScroll на странице (ваша аппаратная конфигурация здесь не рассматривается). Тип и длина контента в элементе прокрутки в определенной степени повлияют на библиотеку скриптов ISCROLL
Количество элементов, которые можно использовать одновременно.
При использовании библиотеки Script Iscroll структура дерева DOM должна быть достаточно проста, чтобы удалить ненужные метки и стараться избегать чрезмерного гнездования тегов.
Оптимальная структура использования IScroll заключается в следующем:
<div id = "warper"> <ul> <li> </li> ...... </ul> </div>
В этом небольшом примере тег UL будет прокручен. Iscroll должен быть подключен к обертке вне содержимого прокрутки для получения результатов.
【Меры предосторожности】:
Только первый дочерний элемент в обертке может быть прокрут. Если вы хотите прокрутить больше элементов, вы можете попробовать следующий метод написания:
<div id = "warper"> <div id = "scroller"> <ul> <li> </li> ... </ul> <ul> <li> </li> ... </ul> </div> </div>
В этом примере элемент Scroller можно прокрутить, даже если он содержит два элемента UL
IScroll должен быть создан перед вызовом, вы можете создать экземпляры IScroll в следующих случаях:
(1) Используйте загруженное событие OndomContentEnt для достижения прокрутки
Подходит для прокрутки контента только содержит текст и изображения, а все изображения имеют фиксированные размеры
<script src = "iscroll.js"> </script> <script> var myscroll; function загружен () {myscroll = new iscroll ("warpper"); } window.addeventListener ("domcontentloaded", загружен, false); </script>Примечание: переменная MyScroll является глобальной, поэтому вы можете позвонить в любом месте
(2) Используйте событие Onload для достижения прокрутки
Поскольку событие, загруженное Domcontent, будет вызвано после загрузки структуры DOM, длина и ширина области прокрутки не могут быть определены до того, как такие элементы не будут загружены. В настоящее время событие Onload может быть реализовано.
<script src = "iscroll.js"> <script> <script> var myscroll; function загружен () {settimeout (function () {myscroll = new iscroll ("warper");}, 100); } window.addeventListener ("загрузка", загружен, false); </script>В этом случае IScroll будет инициализирован после того, как ресурсы страницы (включая изображения) загружаются на 100 мс. Это должен быть относительно безопасный способ назвать Iscroll.
(3) Инициализация встроенных
Эта ситуация будет вызвана, когда страница загружена в JS. Этот метод не рекомендуется, но многие Bigwigs JavaScript используют этот метод. По какой причине я должен не согласиться?
<script src = "iscroll.js"> </script> <div id = "warper"> <ul> <li> </li> ... </ul> </div> <script> var myscroll = new iscroll ("warpper"); </script>Тем не менее, рекомендуется использовать некоторые методы готовых рамках для безопасного вызова iScroll (например, ready () в jQuery).
Параметры, передаваемые в Iscroll
Второй параметр в Iscroll позволяет настроить некоторый контент, например, следующий код:
<script> var myscroll = new iscroll ("warper", {hscrollbar: false, vscrollbar: false}); </script>Второй параметр обычно является объектом. Например, полоса прокрутки не отображается в приведенном выше примере. Обычно используемые параметры следующие:
Hscroll false запрещает горизонтальную прокрутку истинную горизонтальную прокрутку по умолчанию
Vscroll False Redicined Vertical Scroll True Vertical Scroll по умолчанию true true
Hscrollbar ложные шкуры прокрутки в горизонтальном направлении
Vscrollbar false Hide Scrollbar в вертикальном направлении
Фиксированный Crollbar в системе iOS, когда перетаскивание элементов превышает границу свинцового срока, сжимается прокрутка. Установите True, чтобы предотвратить превышение прокрутки прокрутки.
Видимая область скруйлера. По умолчанию верно на Android и False на iOS
Fadescrollbar false указывает, чтобы скрыть полосы прокрутки, когда нет исчезновения
hidescrollbar скрывает прокрутку, когда нет взаимодействия с пользователем по умолчанию, чтобы true
отскок включить или отключить отскок границ, по умолчанию к истинному
Импульс включает или отключает инерцию, по умолчанию к True, этот параметр очень полезен, когда вы хотите сохранить ресурсы.
LockDirection False отменяет блокировку направления сопротивления, истинное перетаскивание может быть только в одном направлении (вверх/вниз или влево/справа)
Достижение различных эффектов
Прокрутите обновить 'потянуть, чтобы обновить демо
Этот эффект стал очень популярным с момента появления Twitter и некоторых местных приложений Apple. Вы можете посмотреть здесь.
В последней версии автор отделяет часть «Pull To Refresh» как дополнительный плагин для Iscroll. Вы можете нажать здесь, чтобы увидеть, как работает Pull to Refresh. Все, что вам нужно сделать, это настроить метод PulldownAction (). Вам может понадобиться Ajax для загрузки нового контента, но не забудьте вызвать обновление после изменения дерева DOM. Следует помнить, что в примере мы добавили 1 -секунскую задержку для моделирования эффекта задержки сети. Конечно, если вы не хотите использовать эту задержку, просто удалите метод установки.
Zoom (PINCH / ZOOM) 'Trouge, чтобы обновить демонстрацию
Мы должны столкнуться с тем фактом, что просто Rolling на самом деле не является чем -то новым. Вот почему в этой версии IScroll 4 мы позволяем вам выразить это
Большой и сокращающийся. Чтобы хотеть эту функцию, вам нужно только установить параметр Zoom на True, чтобы использовать жесты для масштабирования и выхода. Вы можете посмотреть здесь.
Дважды щелкните, чтобы увеличить и выходить в силу, также поддерживается в Iscroll 4. Чтобы использовать функцию Zoom, вам нужна как минимум следующая конфигурация:
var myscroll = new iscroll ("warper", {Zoom: true});
Если вы хотите настроить функцию Zoom в глубине, вы можете использовать некоторые из следующих вариантов:
Zoommax указывает максимальное множественное, что позволяет увеличить, по умолчанию 4
[Примечания]: Если вы хотите, чтобы масштабирование изображения было эффективным, вы должны поместить их в слой синтеза аппаратного обеспечения. С точки зрения непрофессионала, он должен использовать -вебкит -трансформу: Translate3d (0,0,0) на всех элементах IMG, которые необходимо масштабировать. И особенно важно, чтобы аппаратное ускорение заняло много ресурсов и было использовано с осторожностью, в противном случае ваша заявка может потерпеть неудачу.
Snap and Snap to Element 'Carousel' демонстрация
Функция SNAP заключается в том, чтобы определить, скользит ли элемент в указанную позицию. Этот эффект позволяет вам создавать модный эффект шатра.
Плагин будет автоматически анализировать элементы той же метки или того же размера в области прокрутки, что и объект захвата, и вы также можете указать захваченный объект через параметры.
var myscroll = new iscroll ("warper", {snap: true, momentum: false, hscrollbar: false, vscrollbar: false});Вы можете установить объект SNAP, установив параметр SNAP на указанный тег. Например, захватить тег LI.
var myscroll = new iscroll ("warper", {snap: "li", импульс: false, hscrollbar: false, vscrollbar: false});В этом примере Scroller может запечатлеть верхний левый элемент LI в области прокрутки
Пользовательские прокрутки
В Iscroll 4 серия CSS может использоваться для настройки рендеринга прокрутки. Вы можете добавить параметр класса в стержень прокрутки следующим образом:
var myscroll = new iscroll ("warper", {scrollbarclass: "myscrollbar"});Следует отметить, что полоса прокрутки состоит из двух элементов: контейнера и дисплея. Контейнер имеет такую же высоту, что и обертка, в то время как дисплей представляет саму прокрутку.
HTML -структура стержня прокрутки следующим образом:
<div> <div> </div> </div> .myscrollbarv {положение: абсолют; z-index: 100; ширина: 8px; внизу: 7px; вверху: 2px; справа: 1px; } .myscrollbarv> div {position: Absolute; z-Index: 100; ширина: 100%; / * Следующее-это, вероятно, то, что вы хотите настроить */Фон: -Webkit-Gradient (линейный, 0 0, 100% 0, от (#f00), до (#900)); граница: 1px solid#800; -Webkit-background-box-box; -Webkit-box-size-box-box-bosl-bosl-bosle-bosle-bosle-box-box-box-box-box-box-box-box-shosle-box-shos-shosle-shox 1px 1px 0 rgba (255,255,255,0,5); }Общий метод:
(1) Обновить этот метод должен быть вызван при изменении дерева DOM
Например: settimeout (function () {myscroll.refresh ();}, 0);
(2) Iscroll также предоставляет три метода: Scrollto, ScrollToElement и ScrollTopage, чтобы вы могли управлять эффектом прокрутки с помощью JavaScript.
Scrollto (x, y, time, относительно): пусть положение Scolllbar x/y содержимо в течение указанного времени. Например, myscroll.scrollto (0, -100, 200) прокручивается вниз на 100 пикселей за 200 миллисекунд. MyScroll.scrollto (0, 10, 200, True) может достичь влияния прокрутки 10 пикселей на оси Y в течение 200 миллисекунд относительно текущей позиции.
ScrollToElement (элемент, время): прокрутите указанный элемент в течение указанного времени. Например, myscroll.scrolltoelement ('li: Nth-Child (10)', 100) прокручивается до положения 10-го элемента Li в пределах 100 миллисекунд. Первый параметр может использоваться для фильтрации элементов с селектором в CSS3.
Snaptopage (Pagex, Pagey, Time): прокрутите со страницы 1 до страницы 2 в 200 миллисекундах (0 представляет страницу 1, 1 представляет страницу 2). Эту функцию можно вызвать при использовании функции SNAP.
(3) Детрой () полностью устраняет Myscroll и его пространство памяти занято
Например: myscroll.destroy ();
myscroll = null;
Направление развития iscroll
Форма поддержки домена
Оптимизация масштабирования
Лучшая совместимость браузера для настольных компьютеров
Оптимизация события OnScrol
Изменения в добавлении значения хэша
Автоматическое обновление после изменений DOM