Le code est très simple, mais les fonctions implémentées sont très pratiques. Présente juste le code
CSS:
La copie de code est la suivante:
<meta charset = "utf-8" />
<Title> Tirez pour actualiser </Title>
<meta name = "Viewport" Content = "width = Device-Width, Height = Device-Height, Inital-Scale = 1,0, maximum-échelle = 1,0, utilisateur-échec = no;" />
<style>
div {
Position: absolue;
En haut: 0px;
En bas: 0px;
Largeur: 100%;
gauche: 0px;
débordement: caché;
}
li {
Type de style liste: aucun;
hauteur: 35px;
Contexte: #ccc;
Border-Bottom: solide 1px #FFF;
Texte-aligne: gauche;
hauteur de ligne: 35px;
Padding-Left: 15px;
}
ul {
Largeur: 100%;
marge: 0px;
Position: absolue;
gauche: 0px;
rembourrage: 0px;
En haut: 0px;
}
</ style>
HTML:
La copie de code est la suivante:
<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>
<cript>
var scroll = document.QuerySelector ('. Scroll');
var outerscroller = document.QuerySelector ('. OUTERSCROLLER');
var touchstart = 0;
var touchdis = 0;
OUTERSCROLLER.ADDEventListener ('TouchStart', fonction (événement) {
var touch = event.TargetTouches [0];
// Mette l'élément où est votre doigt
TouchStart = Touch.Pagey;
Console.log (TouchStart);
}, FAUX);
OUTERSCROLLER.ADDEventListener ('TouchMove', fonction (événement) {
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;
}, FAUX);
OUTERSCROLLER.ADDEventListener ('Touchend', fonction (événement) {
TouchStart = 0;
var top = scroll.offsetTop;
console.log (en haut);
if (top> 70) rafraîchir ();
if (top> 0) {
var time = setInterval (function () {
scroll.style.top = scroll.offsettop -2 + 'px';
if (scroll.offsetTop <= 0) ClearInterval (temps);
}, 1)
}
}, FAUX);
Fonction Refresh () {
pour (var i = 10; i> 0; i--)
{
var node = document.CreateElement ("li");
node.innerhtml = "je suis nouveau";
Scroll.InsertBefore (Node, Scroll.FirstChild);
}
}
</cript>
Ce qui précède concerne cet article. J'espère qu'il sera utile à tout le monde d'apprendre JavaScript.