El código es muy simple, pero las funciones implementadas son muy prácticas. Solo presenta el código
CSS:
La copia del código es la siguiente:
<meta charset = "utf-8" />
<title> tirar para actualizar </title>
<Meta name = "Viewport" Content = "Width = Device-Width, Height = Device-HEight, Inital-Scale = 1.0, máxima a escala = 1.0, escala de usuario = no;" />
<estilo>
div {
Posición: Absoluto;
arriba: 0px;
Abajo: 0px;
Ancho: 100%;
Izquierda: 0px;
desbordamiento: oculto;
}
li {
Tipo de estilo de lista: Ninguno;
Altura: 35px;
Antecedentes: #ccc;
Border-Bottom: Solid 1px #FFF;
text-align: izquierda;
Línea de altura: 35px;
ROLED-LEFUNDA: 15px;
}
ul {
Ancho: 100%;
margen-top: 0px;
Posición: Absoluto;
Izquierda: 0px;
relleno: 0px;
arriba: 0px;
}
</style>
HTML:
La copia del código es la siguiente:
<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>
<script>
var scroll = document.queryselector ('. scroll');
var outerscroller = document.querySelector ('. OutersCroller');
var touchStart = 0;
var touchDis = 0;
OuterScroller.adDeventListener ('TouchStart', function (Event) {
var touch = event.tarGetTouches [0];
// Pon el elemento donde está tu dedo
touchStart = touch.pagey;
console.log (touchStart);
}, FALSO);
OuterScroller.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;
}, FALSO);
OuterScroller.adDeventListener ('touchend', function (evento) {
touchstart = 0;
var top = scroll.offsettop;
console.log (arriba);
if (top> 70) refresh ();
if (top> 0) {
var tiempo = setInterval (function () {
scroll.style.top = scroll.offsettop -2+'px';
if (scroll.offsettop <= 0) ClearInterval (tiempo);
}, 1)
}
}, FALSO);
función refresh () {
para (var i = 10; i> 0; i--)
{
var nodo = document.createElement ("li");
node.innerhtml = "Soy nuevo";
scroll.insertbefore (nodo, scroll.firstchild);
}
}
</script>
Lo anterior se trata de este artículo. Espero que sea útil para todos aprender JavaScript.