Javascript tulen melaksanakan kemahiran function_javascript muat semula tarik-turun mudah

Kod ini sangat mudah, tetapi fungsi yang dilaksanakan sangat praktikal saya akan memberikan kod secara langsung

CSS:

Salin kod Kod adalah seperti berikut:

div{
Jawatan: mutlak;
atas:0px;
bawah:0px;
Lebar:100%;
Kiri:0px;
Limpahan: tersembunyi;
}
li{
Jenis gaya senarai: tiada;
Tinggi:35px;
latar belakang: #ccc;
Sempadan-bawah: pepejal 1px #fff;
Jajaran teks: kiri;
Ketinggian garisan: 35px;
​ padding-left:15px;
}
ul{
Lebar:100%;
​ margin-top:0px;
Jawatan: mutlak;
Kiri:0px;
​ padding:0px;
atas:0px;
}

HTML:

Salin kod Kod adalah seperti berikut:

   

       
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

        
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

   

   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];
        // 把元素放在手指所在的位置
           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 atas = tatal.offsetTop;
        console.log(atas);
        if(atas>70)refresh();
        jika(atas>0){
            var time = setInterval(function(){
              scroll.style.top = scroll.offsetTop -2 'px';
              if(scroll.offsetTop<=0)clearInterval(masa);
            },1)
        }
    }, palsu);
   fungsi refresh(){
    untuk(var i = 10;i>0;i--)
        {
            var node = document.createElement("li");
            node.innerHTML = "Saya baru";
            scroll.insertBefore(nod,scroll.firstChild);
        }
   }

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang yang belajar javascript.