Слияние кода завершено, страница обновится автоматически
Официальный сайт: http://www.chjtx.com/JRoll/
My English is very poor, but this doesn't affect my desire to communicate with the world, thank you for the help of Google Translate
Дополнительная информация в видео: JRoll сборка [закрыв глаза]
Скачать презентацию к видео: JRoll视频.pptx
Используйте телефон для сканирования QR-кода для просмотра примера
http://www.chjtx.com/JRoll/demos/
Обратите внимание: JRoll является независимым плагином, который не требует зависимости от каких-либо сторонних библиотек. В демонстрационном коде используется библиотека FastClick для показа совместимости JRoll с FastClick. При использовании IScroll5 с параметром click:true на iOS устройствах вместе с FastClick возникают проблемы с событиями кликов, которые требуют двойного нажатия для активации. Это проблема отсутствует при использовании JRoll.
Notice: JRoll does not require reliance on any third-party libraries.
# Клонировать репозиторий Clone repository
git clone https://github.com/chjtx/JRoll.git
# Перейти в проект Go into project
cd JRoll
# Установить express Install express
npm install -g express
# Если используете Mac, потребуется sudo
# If on mac, use sudo
sudo npm install -g express
```# Запустить запуск
node server.js
Затем откройте localhost:3020/demos/ в браузере
А затем откройте localhost:3020/demos/ в браузере
JRoll — это легкий плагин для прокрутки HTML5, который может обрабатывать десятки тысяч данных, имеет функции ускоренной прокрутки, отскока, масштабирования, полосы прокрутки и событий прокрутки. Он совместим со спецификациями модулей CommonJS/AMD/CMD, открытый и бесплатный.
Вторая версия JRoll была переписана на основе первой версии, используя алгоритм прокрутки, основанный на движении во времени, что решает проблему замедленной прокрутки при снижении частоты кадров. Также были изменены методы проверки направлений движения, что позволяет более точно и чувствительно определять горизонтальное и вертикальное направление.
Во второй версии JRoll некоторые API были изменены, поэтому она не полностью совместима с первой версией JRoll. JRoll второго издания основан на первой версии JRoll, перезаписи алгоритма прокрутки, основывающейся на временной перемещаемости, чтобы решить проблему медленной скорости прокрутки, изменения в горизонтальном и вертикальном направлении для более точного и чувствительного определения направления захвата.
JRoll второе издание добавляет некоторые API, которые не полностью совместимы с первой версией JRoll.### Совместимость
Обратите внимание: JRoll специально разработан для мобильных приложений, совместимость с браузерами ПК предназначена только для удобства разработки и отладки, поэтому рекомендуется использовать Google Chrome Simulator для разработки, а также использовать его на мобильных устройствах.
Примечание: Чтобы сделать этот плагин легким, JRoll совместим с браузерами ПК только для удобства разработки и отладки, поэтому настоятельно рекомендуется использовать Google Chrome Simulator для разработки, пожалуйста, используйте его на мобильных устройствах.
На UC Browser работает плохо, автор уже определил UC Browser как информационное приложение, а не профессиональный браузер, поэтому специальной совместимости с ним нет.
Нет специальной совместимости со старыми браузерами
npm
npm install jroll --save
Обычное введение
<script src="jroll"></script>
Введение согласно CommonJS
var JRoll = require('jroll');
Введение согласно AMD (requireJS)
require(['jroll'], function(JRoll) {
...
});
Введение согласно CMD (seaJS)
seajs.use('jroll', function(JRoll) {
...
});
```### Пример простого использования Simple example
```html
<!-- HTML код -->
<div id="wrapper">
<ul id="scroller">
<li>Есть прекрасная девушка, видеть которую невозможно забыть.</li>
<li>Один день без неё, и сердце начинает трепетать.</li>
<li>Феникс летает высоко, ищет свою пару по всем морям.</li>
<li>Но она не находится за стеной.</li>
<li>Играю на лютне, чтобы выразить свои чувства.</li>
<li>Когда же ты придешь, чтобы успокоить мои тревоги?</li>
<li>Желаю разделить судьбу с тобой, взять тебя за руку.</li>
<li>Не имея возможности летать вместе, мы оба погружаемся в печаль.</li>
</ul>
</div>
```<!-- CSS код -->
<style>
ul {margin: 0; padding: 0;}
li {line-height: 24px; margin-left: 24px;}
# wrapper {width: 200px; height: 100px; border: 1px solid;}
</style>
<!-- JavaScript код -->
<script>
new JRoll("#wrapper");
</script>
```## Использование
### Как использовать
```js
var jroll = new JRoll(селектор [, опции]);
селектор — это контейнер, который может быть строкой выборки по ID #обертка, либо объектом DOM document.getElementById('обертка'). Второй аргумент — это опциональный объект, который определяет, как будет создан экземпляр JRoll.
Пример: Создание экземпляра с вертикальной полосой прокрутки
var jroll = new JRoll("#обертка", {scrollBarY: true});
После создания объекта JRoll можно динамически изменять некоторые опциональные параметры.
Пример: Отключение отскока
jroll.options.bounce = false;
Обозначает возможность динамического изменения Индикатор возможности динамического изменения|Допустимое значение Key |Значение по умолчанию Default Value |Описание Description |
|----------------------|-------------------------------|-----------------------|
|id |[Случайно сгенерировано]
[Randomly generated] |id, уникальный маркер экземпляра JRoll, рекомендуется вручную указывать id для удобства доступа к конкретному объекту JRoll в глобальном JRoll.jrollMap, если не указан, система автоматически создаст его.
Id, уникальный идентификатор экземпляра JRoll, рекомендуется вручную указывать id для удобства доступа к конкретному объекту JRoll в глобальном JRoll.jrollMap, если не указан, система автоматически создаст его. |
|scrollX |false |Активировать горизонтальное прокручивание
Включить горизонтальное прокручивание |
|scrollY |true |Активировать вертикальное прокручивание
Включить вертикальное прокручивание |
|scrollFree |false |Активировать свободное прокручивание, по умолчанию при горизонтальном прокручивании вертикальное прокручивание отключено и наоборот, если используется для масштабирования изображения, можно установить этот параметр как true
По умолчанию, когда происходит горизонтальное прокручивание, вертикальное прокручивание отключается и наоборот. Если используется масштабирование изображения, можно установить этот параметр как true ||minX |0 |Граница прокрутки влево 
Граница прокрутки вправо|
|maxX |[Отрицательная ширина scroller]
[-scroller's width] |Граница прокрутки вправо
Граница прокрутки влево|
|minY |0 |Граница прокрутки вниз
Граница прокрутки вверх|
|maxY |[Отрицательная высота scroller]
[-scroller's height] |Граница прокрутки вверх
Граница прокрутки вниз|
|zoom |false |Активировать масштабирование
Включить масштабирование|
|zoomMin |1.0 |Минимальный коэффициент масштабирования
Минимальный коэффициент масштабирования|
|zoomMax |4.0 |Максимальный коэффициент масштабирования
Максимальный коэффициент масштабирования|
|bounce |true |Разрешить отскок
Разрешить отскок|
|scrollBarX |false |Открыть горизонтальный ползунок, ползунок появляется, когда страница прокручивается более чем на два широких экрана
Открыть горизонтальный ползунок|
|scrollBarY |false |Открыть вертикальный ползунок, ползунок появляется, когда страница прокручивается более чем на два узких экрана
Открыть вертикальный ползунок|
|scrollBarFade |false |Ползунок использует режим плавного затухания
Ползунок использует режим плавного затухания| |preventDefault |true |Запрещает дефолтное событие touchmove
Запрещает дефолтное событие touchmove |
|momentum |true |Открывает ускоренную прокрутку и инерционный переход
Открывает ускоренную прокрутку и инерционный переход ||
|autoStyle |true |Автоматически добавляет стили к wrapper и scroller|
|autoBlur |true |Добавлено в версии v2.4.3, автоматически отключает фокус input/textarea при прокрутке, чтобы скрыть клавиатуру. Установка значения false может вызвать проблему с появлением курсора, который не следует за полем ввода на iOS|
| adjustTop |190 |С JRoll версии v2.2.0 опция adjustTop удалена, функционал автоматической корректировки позиции поля ввода на Android перемещён в jroll-fixedinput.js. На устройствах с Android при появлении клавиатуры происходит автоматическая корректировка положения поля ввода. Автор не рекомендует использовать эту опцию; если клавиатура закрывает поле ввода, лучше переработать страницу формы. Пример: Как решить проблему с закрытым полем ввода клавиатурой?|
|scroller |[первый дочерний элемент wrapper]
[Wrapper's first child element]|Указывает scroller, значение нельзя менять динамически, можно указывать строку выбора id #scroller, либо объект DOM document.getElementById('scroller')
Specifies scroller, cannot be dynamically changed, can be an ID selector string #scroller, or a DOM object document.getElementById('scroller')|
|edgeRelease |true |Добавлено в версии v2.4.|7, позволяет автоматически завершать прокрутку при достижении границ экрана сверху и снизу, что решает проблему с отсутствием события touchEnd при выведении пальца за пределы экрана. Если скорость движения пальца слишком высока, данная опция может не работать должным образом.
|### Атрибуты Attributes|- id, уникальный идентификатор экземпляра JRoll.
id -> уникальный идентификатор экземпляров JRoll.var jroll = new JRoll("#wrapper");
console.log(jroll.id);
jrollMap, объект, коллекция экземпляров JRoll, хранящая все экземпляры JRoll текущей страницы.jrollMap -> объект, коллекция экземпляров JRoll, содержащая все экземпляры JRoll текущей страницы.console.log(JRoll.jrollMap);
Обозначает поддержку цепочечного вызова
Indicates support for chaining calls
Метод используется для обновления экземпляра JRoll при изменении высоты скроллера или обертки.
This method is used to refresh a JRoll instance when the height of the scroll area or wrapper changes.
var jroll = new JRoll("#wrapper");
// do something, e.g., dynamically modify the content of the scroll area so its height changes
jroll.refresh();
Этот метод используется для перемещения скроллера. Он принимает пять параметров: первый — смещение по оси X (обязательный), второй — смещение по оси Y (обязательный), третий — время анимации (необязательный, в миллисекундах), четвертый — возможность выхода за границы (необязательный, true/false), пятый — обратный вызов. Чтобы получить текущие значения смещения по X и Y, можно вывести jroll.x и jroll.y.
jroll.scrollTo(x, y, duration, outOfBounds, callback);
```Этот метод используется для перемещения области прокрутки. Он принимает пять параметров: первый — смещение по оси X (обязательный), второй — смещение по оси Y (обязательный), третий — длительность анимации (необязательный, в миллисекундах), четвертый — возможность выхода за границы (необязательный, true/false), и пятый — обратный вызов. Чтобы получить текущие значения смещений по оси X и Y, можно распечатать `jroll.x` и `jroll.y`.```js
jroll.scrollTo(x, y [, duration , bool, callback])
var jroll = new JRoll("#wrapper");
// Переместиться в позицию 0px, -100px за 200 миллисекунд
jroll.scrollTo(0, -100, 200);
// Разрешить движение за границы
jroll.scrollTo(100, 100, 0, true);
// Обратный вызов
jroll.scrollTo(0, 100, 400, false, function() {
// Выполнить после окончания прокрутки
});
jroll.scrollToElement(selector[, duration , bool, callback])
Переместить до указанного элемента. Первый параметр — это строка или DOM-элемент (обязательный параметр и должен быть дочерним элементом scroller), второй параметр — время (необязательный параметр), третий параметр — разрешение выхода за границы (необязательный параметр, true/false), четвертый параметр — обратный вызов метода (необязательный параметр).
var jroll = new JRoll("#wrapper");
jroll.scrollToElement("#el", 300, false, function () { ... });
Активировать скролл, использовать disable для деактивации скролла после чего можно снова активировать с помощью этого метода.
Enable scrolling, use disable to disable scrolling and then you can reactivate with this method.
jroll.enable();
Отключает возможность скролла.
Disables scrolling.
jroll.disable();
Уничтожает объект jroll.
Destroys the jroll object.
jroll.destroy();
Масштабирование, принимает один целочисленный/дробный параметр.
Scaling accepts one integer/floating point parameter.
// Увеличение в 1.5 раза
jroll.scale(1.5);
/* Пример:
* jroll1 - внешний слой, содержащий jroll2
* Когда jroll2 достигает определённой позиции, он передаёт управление jroll1
*/
/* Example:
* Jroll1 - outer layer containing jroll2
* When jroll2 reaches a certain position, it transfers control to jroll1
*/
var pos;
var jroll1 = new JRoll("#wrapper", {bounce: true});
var jroll2 = new JRoll("#inner", {bounce: true});
jroll2.on("scrollStart", function() {
pos = this.y;
});
jroll2.on("scroll", function(e) {
if ((this.y - pos > 0 && pos === 0) || (this.y - pos < 0 && pos === this.maxScrollY)) {
// Передача управления jroll1
jroll2.call(jroll1, e);
}
});
JRoll предоставляет восемь событий, каждый из которых может иметь несколько действий. "this" внутри события указывает на объект jroll.
JRoll provides a total of eight events, each of which can have several actions. "this" inside the event refers to the jroll instance.
Срабатывает при начале прокрутки
jroll.on("scrollStart", function() {
// выводит текущее смещение по оси X, this указывает на объект jroll
console.log(this.x);
});
Срабатывает во время прокрутки
jroll.on("scroll", function() {
// делай что хочешь...
});
Срабатывает в конце прокрутки
jroll.on("scrollEnd", function() {
// делай что хочешь...
});
Срабатывает при отпускании пальца пользователя, после события начала прокрутки, но до события окончания прокрутки```js jroll.on("touchEnd", function() { // сделай что хочешь... });
#### zoomStart
Выполняется при начале масштабирования
```js
jroll.on("zoomStart", function() {
// сделай что хочешь...
});
Выполняется во время масштабирования
jroll.on("zoom", function() {
// сделай что хочешь...
});
Выполняется после завершения масштабирования
jroll.on("zoomEnd", function() {
// сделай что хочешь...
});
Используйте jroll.refresh() для обновления реализации
jroll.on("refresh", function() {
// сделай что хочешь...
});
У каждого скроллера есть индекс, указывающий на его собственный экземпляр jroll
<div id="w">
<div id="s"></div>
</div>
<script>
var jroll = new JRoll('#w');
document.getElementById('s').jroll === jroll; // true
</script>
this.s to determine the current scrolling statevar jroll = new JRoll("#wrapper");
jroll.on("scroll", function() {
if (this.s === "scrollY") {
// сделай что хочешь...
} else {
// или сделай что-то другое...
}
})
jroll.s представляет состояние, и шесть возможных значений:
null — начальное состояние, без каких-либо операций скроллингаpreScroll — готовность к началу скроллингаpreZoom — готовность к началу масштабированияscrollX — скроллинг в горизонтальном направленииscrollY — скроллинг в вертикальном направленииscrollFree — скроллинг в обоих направлениях> Примечание: В версиях JRoll до v2.3.0 сжатый файл минифицированного кода использует значения 1, 2, 3, 4, 5 для представления состояний preScroll, preZoom, scrollX, scrollY, scrollFree. С версии JRoll v2.3.0 и выше используется единая система значений, как в незаминифицированной версии. Начальный выбор использования цифрового представления для экономии места был ошибочным.var jroll = JRoll("#wrapper");
jroll.on("scrollEnd", function() {
if (this.y === this.maxScrollY) {
console.log("Вы достигли нижней границы.");
}
});
Дополнительные свойства объекта jroll можно найти в консоли браузера.
Если значение scrollBarX или scrollBarY является строкой, то это указывает на активацию пользовательской настройки полосы прокрутки, требующей самостоятельного оформления стилей.
Полоса прокрутки имеет некоторые специфические требования к стилизации. При создании пользовательского дизайна размера и цвета полосы прокрутки следует сначала скопировать базовый стиль, а затем отредактировать .jroll-ybar / .jroll-xbar и .jroll-ybtn / .jroll-xbtn.
var jroll = new JRoll("#wrapper", {
scrollBarY: "custom",
scrollBarFade: true
});
<video> в состоянии покоя, вы можете использовать следующие методы для решения этой проблемы.Непроигрываемое состояние <video> похоже на контролы, которые не могут захватывать события типа touchstart, поэтому использование JRoll для прокрутки невозможно. Эту проблему можно решить с помощью прозрачного div.<div id="parent">
<video id="video" controls="controls">
<source src="./video.ogg" type="video/ogg">
</video>
<div class="fixed-video-scroll"></div>
</div>
<script>
var video = document.getElementById("video");
document.addEventListener("click", function(e) {
if (e.target.className === "fixed-video-scroll") {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
});
</script>
#parent как относительно позиционируемый элемент, ширина video должна быть 100%, высота может автоматически рассчитываться или быть рассчитана самостоятельно.div.fixed-video-scroll должен иметь абсолютное позиционирование, чтобы закрыть video. Высота должна быть равной высоте video минус 44px, чтобы гарантировать, что контролы не будут скрыты.div.fixed-video-scroll будет запускать воспроизведение или приостанавливать его.Также исправлены знаки препинания и пунктуация для обеспечения правильного смысла и грамматики.1. При нажатии на комментарий отображается плавающее окно, чтобы поле ввода располагалось в верхней части экрана. 2. Переключение на новую страницу для выполнения операций ввода.
Эти два варианта дизайна умело избегают ситуации, когда поле ввода скрывается под клавиатурой. Подробнее можно узнать из этой статьи Как избежать скрытия ввода под клавиатурой в WebAPP?.
JRoll использует translate3d для прокрутки страницы, слушает события фокусировки поля ввода, применяет метод scrollTo для перемещения поля ввода в видимую область и таким образом решает проблему его закрытия на Android. Подробнее см. компонент jroll-fixedinput.
Устройства iOS автоматически корректируют положение поля ввода, хотя иногда это положение не то, что нам требуется. К сожалению, пока нет способа запретить автоматическое перемещение поля ввода в iOS при использовании H5.
Special thanks
Вдохновением для JRoll послужил iScroll iScroll
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )