Pure javascript implements simple pull-down refresh function_javascript skills

The code is very simple, but the functions implemented are very practical. I will provide the code directly

CSS:

Copy code The code is as follows:

HTML:

Copy code The code is as follows:

   

       
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

        
• 1

       
• 2

       
• 3

       
• 4

       
• 5

       
• 6

       
• 7

       
• 8

       
• 9

       
• 10

   

<script><br>    var scroll = document.querySelector('.scroll');<br>    var outerScroller = document.querySelector('.outerScroller');<br>    var touchStart = 0;<br>    var touchDis = 0;<br>    outerScroller.addEventListener('touchstart', function(event) { <br>         var touch = event.targetTouches[0]; <br>         // 把元素放在手指所在的位置 <br>            touchStart = touch.pageY; <br>            console.log(touchStart);<br>         }, false);<br>    outerScroller.addEventListener('touchmove', function(event) { <br>         var touch = event.targetTouches[0]; <br>         console.log(touch.pageY 'px');  <br>         scroll.style.top = scroll.offsetTop touch.pageY-touchStart 'px';<br>         console.log(scroll.style.top);<br>         touchStart = touch.pageY;<br>         touchDis = touch.pageY-touchStart;<br>         }, false);<br>    outerScroller.addEventListener('touchend', function(event) { <br>         touchStart = 0;<br>         var top = scroll.offsetTop;<br>         console.log(top);<br>         if(top>70)refresh();<br>         if(top>0){<br>             var time = setInterval(function(){<br>               scroll.style.top = scroll.offsetTop -2 'px';<br>               if(scroll.offsetTop<=0)clearInterval(time);<br />             },1)<br />         }<br />     }, false);<br />    function refresh(){<br />     for(var i = 10;i>0;i--)<br>         {<br>             var node = document.createElement("li");<br>             node.innerHTML = "I'm new";<br>             scroll.insertBefore(node,scroll.firstChild);<br>         }<br>    }<br> </script>

The above is the entire content of this article. I hope it will be helpful to everyone learning javascript.