Pure JavaScript realizes simple drop-down refresh function _javascript skill

The code is very simple, the implementation of the function is very practical, directly to the code

Css:

Copy Code code as follows:

<meta charset= "Utf-8"/>
<title>pull to Refresh</title>
<meta name= "viewport" content= "width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0, User-scalable=no; "/>
<style>
div{
Position:absolute;
top:0px;
bottom:0px;
width:100%;
left:0px;
Overflow:hidden;
}
li{
List-style-type:none;
height:35px;
Background: #ccc;
Border-bottom:solid 1px #fff;
Text-align:left;
line-height:35px;
padding-left:15px;
}
ul{
width:100%;
margin-top:0px;
Position:absolute;
left:0px;
padding:0px;
top:0px;
}
</style>

Html:

Copy Code code as follows:

<div class= "Outerscroller" >
<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];
Put the element in the position of the finger
Touchstart = Touch.pagey;
Console.log (Touchstart);
}, False);
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;
}, False);
Outerscroller.addeventlistener (' Touchend ', function (event) {
Touchstart = 0;
var top = Scroll.offsettop;
Console.log (top);
if (top>70) refresh ();
if (top>0) {
var time = setinterval (function () {
Scroll.style.top = scroll.offsettop-2+ ' px ';
if (scroll.offsettop<=0) clearinterval (time);
},1)
}
}, False);
function Refresh () {
for (var i = 10;i>0;i--)
{
var node = document.createelement ("Li");
node.innerhtml = "I ' m new";
Scroll.insertbefore (Node,scroll.firstchild);
}
}
</script>

The above is the entire content of this article, I hope to learn JavaScript can help you.