O código é muito simples, mas as funções implementadas são muito práticas.
CSS:
A cópia do código é a seguinte:
<meta charset = "utf-8" />
<title> puxe para atualizar </title>
<meta name = "viewport" content = "width = largura do dispositivo, altura = altura do dispositivo, escala inital = 1,0, escala máxima = 1.0, scalable usuário = não;
<estilo>
div {
Posição: Absoluto;
Top: 0px;
Inferior: 0px;
largura: 100%;
Esquerda: 0px;
estouro: oculto;
}
li {
Tipo no estilo de lista: nenhum;
Altura: 35px;
Antecedentes: #ccc;
fundo de borda: sólido 1px #fff;
Alinhamento de texto: esquerda;
altura de linha: 35px;
preenchimento-esquerda: 15px;
}
ul {
largura: 100%;
Margin-top: 0px;
Posição: Absoluto;
Esquerda: 0px;
preenchimento: 0px;
Top: 0px;
}
</style>
Html:
A cópia do código é a seguinte:
<div>
<ul class = 'roll'>
<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>
<Cript>
var scroll = document.QuerySelector ('. Scroll');
var OutersCroller = document.QuerySelector ('. OutersCroller');
var touchstart = 0;
var touchdis = 0;
Outerscroller.addeventListener ('TouchStart', função (evento) {
var touch = event.TargetTouches [0];
// Coloque o elemento onde está seu dedo
touchstart = touch.pagey;
console.log (touchstart);
}, false);
Outerscroller.addeventListener ('touchmove', função (evento) {
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;
}, false);
Outerscroller.addeventListener ('Toukend', função (evento) {
touchstart = 0;
var top = scroll.OffSetTop;
console.log (em cima);
if (topo> 70) refresh ();
if (top> 0) {
var time = setInterval (function () {
scroll.style.top = scroll.offsettop -2+'px';
if (scroll.offsetTop <= 0) clearInterval (tempo);
}, 1)
}
}, false);
função refresh () {
para (var i = 10; i> 0; i--)
{
var node = document.createElement ("li");
node.innerhtml = "Eu sou novo";
scroll.insertBefore (nó, scroll.firstchild);
}
}
</script>
O acima é tudo sobre este artigo.