SoFunction
Updated on 2025-02-28

Pure JavaScript implements simple pull-down refresh function


<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 = ('.scroll');
   var outerScroller = ('.outerScroller');
   var touchStart = 0;
   var touchDis = 0;
   ('touchstart', function(event) {
        var touch = [0];
// Put the element where your finger is
           touchStart = ;
           (touchStart);
        }, false);
   ('touchmove', function(event) {
        var touch = [0];
        ( + 'px'); 
        = + -touchStart + 'px';
        ();
        touchStart = ;
        touchDis = -touchStart;
        }, false);
   ('touchend', function(event) {
        touchStart = 0;
        var top = ;
        (top);
        if(top>70)refresh();
        if(top>0){
            var time = setInterval(function(){
              = -2+'px';
              if(<=0)clearInterval(time);
            },1)
        }
    }, false);
   function refresh(){
    for(var i = 10;i>0;i--)
        {
            var node = ("li");
            = "I'm new";
            (node,);
        }
   }
</script>