В этой статье описываются методы реализации прокрутки и инерционного смягчения для разработки мобильных телефонов JS+HTML5. Поделитесь этим для вашей ссылки, следующим образом:
1. Прокрутите следующие три метода реализации:
1) Используйте нативный атрибут CSS переполнение: прокрутка div ID = родительский стиль = переполнение: прокрутка; Divid = 'Content' Область контента /Div /Div Уведомление: в Android есть ошибка, и она вернется в верхнюю область контента после прокрутки. Решение состоит в том, чтобы использовать последние два метода для его реализации.
2) Идея реализации программирования JS: сравните изменения позиции передней и задней части пальцев на экране, чтобы изменить содержание элемента контента
1. Прокрутите
Вот три метода реализации:
1) Используйте нативный атрибут CSS переполнение: прокрутка
<div id = "parent" style = "overflow: scroll;> <div id = 'content'> область контента </div> </div>
Уведомление:
В Android есть ошибка, и после прокрутки она вернется в верхнюю область контента. Решение состоит в том, чтобы использовать последние два метода для его реализации
2) реализация программирования JS
Идея: Сравните положение элемента контента до и после перемещения пальца на экране
Шаг 1: Установите переполнение родителя в скрытую, установите позицию контента относительно и сверху 0;
Шаг 2: Слушайте события Touch
var parent = document.getElementbyId ('parent'); parent.addeventListener ('touchStart', function (e) {// do touchStart}); parent.addeventListener ('touchmove', function (e) {// do touchmove}); parent.addeventLister ('touchend', funct touchend}); parent.addeventlistener ('touchend', function (e) {// do touchend});Шаг 3: Реализация кода прокрутки
/*** Здесь реализуется только вертикальная прокрутка*/var parent = document.getElementbyId ('parent'); var content = document.getElementbyid ('content') var starty = 0; // начальная позиция var lasty = 0; // Последняя позиция parent.addeventListener ('touchStart', function (e) {lasty = starty = e.touches [0] .pagey;}); parent.addeventListener ('touchmove', function (e) {var owny = e.touches [0] .pagey; var movey = nowy - lasty; ''); content.style.top.replace ('px', '');Шаг 4: Оптимизация
Приведенный выше код работает на мобильном телефоне и имеет много застрявших результатов.
Для оптимизации, пожалуйста, смотрите:
3) Использовать структуру ISCROLL4
var scroll = new iscroll ('parent', {hscrollbar: false, vscrollbar: true, checkdomchanges: true});Официальный веб-сайт Framework: http://cubiq.org/iscroll-4
2. Инерционное смягчение
Идея: возьмите среднюю скорость V пальцев, которые проводят на экране в течение последнего периода времени, и пусть V изменится в соответствии с уменьшением функции, пока не сможет двигаться или v <= 0
/*** Здесь реализуется только вертикальная прокрутка*/var parent = document.getElementbyId ('parent'); var content = document.getElementbyid ('content') var starty = 0; // начальная позиция var lasty = 0; // Последняя позиция/*** переменная для облегчения*/var lastmovetime = 0; var lastmovestart = 0; var stopinertiamove = false; // Снижение того, чтобы остановить облегчение родителя. AddeventListener ('touchStart', function (e) {lasty = starty = e.touches [0] .pagey;/ *** Код ослабления*/ lastmovestart = lasty; lastmovetime = e.timestamp || date.now (); stopinertiame = true;}); parent. nowy = e.touches [0] .pagey; Date.now (); Content.tyle.top.reploce ('px', ''); LastMovetime); if (STOPINERIAMEVE) settimeout (инициалирование, 10);PS: Вот несколько инструментов форматирования и благоустройства кода для вас. Я считаю, что вы будете использовать их в будущем процессе разработки:
Онлайн инструменты для украшения и форматирования онлайн -кода:
http://tools.vevb.com/code/js
JavaScript Compression/Formatting/Инструменты шифрования:
http://tools.vevb.com/code/jscompress
Код JSON онлайн форматирование/благоустройство/сжатие/редактирование/преобразование инструментов:
http://tools.vevb.com/code/jsoncodeformat
Инструменты проверки кода JSON, проверка, осмотр, благоустройство и форматирование:
http://tools.vevb.com/code/json
For more information about jQuery, please visit this site's special topics: "Summary of common plug-ins and usages of jQuery", "Summary of Ajax usage in jquery", "Summary of jQuery table (table) operation skills", "Summary of jQuery drag and drop effects and techniques", "Summary of jQuery extension skills", "Summary of common classic special effects of jQuery", "Summary of jQuery animation and special Использование эффектов »и« Сводка использования селектора jQuery »
Я надеюсь, что эта статья будет полезна для каждого программирования JQUERY.