Kode ini sangat sederhana, tetapi fungsi yang diimplementasikan sangat praktis.
CSS:
Salinan kode adalah sebagai berikut:
<meta charset = "UTF-8" />
<title> Tarik untuk menyegarkan </iteme>
<meta name = "viewport" content = "width = device-width, height = perangkat-tinggi, skala inital = 1.0, skala maksimum = 1.0, skala pengguna = tidak;"
<tyle>
Div {
Posisi: Absolute;
Atas: 0px;
Bawah: 0px;
Lebar: 100%;
Kiri: 0px;
meluap: tersembunyi;
}
Li {
Daftar-gaya-tipe: tidak ada;
Tinggi: 35px;
Latar Belakang: #CCC;
Border-Bottom: Solid 1px #FFF;
Teks-Align: Kiri;
Line-Height: 35px;
Padding-left: 15px;
}
ul {
Lebar: 100%;
margin-top: 0px;
Posisi: Absolute;
Kiri: 0px;
padding: 0px;
Atas: 0px;
}
</tyle>
Html:
Salinan kode adalah sebagai berikut:
<div>
<ul class = 'gulir'>
<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 ('. gulir');
var outerscroller = document.queryselector ('. outerscroller');
var TouchStart = 0;
var touchdis = 0;
outerscroller.addeventListener ('touchstart', function (event) {
var touch = event.targettouches [0];
// letakkan elemen di tempat jari Anda berada
TouchStart = Touch.pagey;
console.log (touchstart);
}, PALSU);
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;
}, PALSU);
outerscroller.addeventListener ('touchend', function (event) {
TouchStart = 0;
var top = scroll.offsettop;
console.log (atas);
if (atas> 70) refresh ();
if (top> 0) {
var time = setInterval (function () {
scroll.style.top = scroll.offsettop -2+'px';
if (scroll.offsettop <= 0) clearInterval (waktu);
}, 1)
}
}, PALSU);
fungsi refresh () {
untuk (var i = 10; i> 0; i--)
{
var node = document.createElement ("li");
node.innerhtml = "I'm new";
scroll.insertbefore (node, scroll.firstchild);
}
}
</script>
Di atas adalah semua tentang artikel ini.