Код очень прост, но реализованные функции очень практичны. Просто представьте код
CSS:
Кода -копия выглядит следующим образом:
<meta charset = "utf-8" />
<title> Потянуть, чтобы обновить </title>
<meta name = "viewport" content = "width = width устройства, высота = высота устройства, inital-масштаб = 1,0, максимальная шкала = 1,0, пользовательский шкалевый = нет;" />
<style>
div {
позиция: абсолютно;
Верх: 0px;
Внизу: 0px;
Ширина: 100%;
слева: 0px;
переполнение: скрыто;
}
li {
тип списка: нет;
Высота: 35px;
Фон: #CCC;
Пограничный подъем: твердый 1px #fff;
Текст-альбом: слева;
высота линии: 35px;
Лебь набивки: 15px;
}
уль {
Ширина: 100%;
маржинальная версия: 0px;
позиция: абсолютно;
слева: 0px;
Заполнение: 0px;
Верх: 0px;
}
</style>
HTML:
Кода -копия выглядит следующим образом:
<div>
<ul class = 'scroll'>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
<li> 7 </li>
<li> 8 </li>
<li> 9 </li>
<li> 10 </li>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
<li> 6 </li>
<li> 7 </li>
<li> 8 </li>
<li> 9 </li>
<li> 10 </li>
</ul>
</div>
<Скрипт>
var scroll = document.queryselector ('. Scroll');
var outterscroller = document.queryselector ('. OutersCroller');
var touchStart = 0;
var touchdis = 0;
overscroller.addeventListener ('touchStart', function (event) {
var touch = event.targettouches [0];
// Поместите элемент, где ваш палец
touchStart = touch.pagey;
Console.log (TouchStart);
}, ЛОЖЬ);
overscroller.addeventlistener ('touchmove', function (event) {
var touch = event.targettouches [0];
console.log (touch.pagey + 'px');
scroll.style.top = scroll.offsettop + touch.pagey-touchstart + 'px';
console.log (scroll.style.top);
touchStart = touch.pagey;
touchdis = touch.pagey-touchstart;
}, ЛОЖЬ);
overscroller.addeventListener ('touchend', function (event) {
TouchStart = 0;
var top = scroll.offsettop;
console.log (top);
if (top> 70) refresh ();
if (top> 0) {
var time = setInterval (function () {
scroll.style.top = scroll.offsettop -2+'px';
if (scroll.offsettop <= 0) clearInterval (время);
}, 1)
}
}, ЛОЖЬ);
Функция rebresh () {
для (var i = 10; i> 0; i--)
{
var node = document.createElement ("li");
node.innerhtml = "Я новый";
scroll.insertbefore (node, scroll.firstchild);
}
}
</script>
Выше всего об этой статье. Я надеюсь, что всем будет полезно изучить JavaScript.