JSFiddle - React, Tailwind, and code Playground

by Manujith Pallewatte

HTML

<body>
    
<h1>new pull to refresh list</h1>

    <div class="list">
        <div id="touchloader" style="text-align: center;display: none;">Loading.....</div>
        <ul id="touchlist" style="position: relative;top:0px;">
            <li>manzzup</li>
            <li>test</li>
            <li>manujith</li>
            <li>other</li>
            <li>this</li>
        </ul>
    </div>
    <script>
        
    </script>
</body>

CSS

.list li {
     list-style-type:none;
     line-height:50px;
     height:50px;
     font-size:1.5em;
     border-bottom:1px solid #6BA5E7;
 }

JavaScript

//grab the list
var list = document.getElementById("touchlist");
//grab the loading div
var loader = document.getElementById("touchloader");
//keep the state whether the fingers are touched
var isTouched = false;
//keep the state whether a PULL actually went out
var isMoved = false;
//This has the original Top offset (relative to screen) position of the list
var prevY = parseInt(list.offsetTop);
//This has the original Top CSS position of the list
var cssY = list.style.top;
cssY = parseInt(cssY.substring(0, cssY.length - 2));

//Add the start of the touching
list.addEventListener("touchstart", function (e) {
    //touch started ? YES
    isTouched = true;
    //initialize the touched point
    prevY = e.changedTouches[0].clientY;
    //we use css3 transitions when available for smooth sliding
    list.style.transition = "";
    e.preventDefault();
}, false);
list.addEventListener("touchend", function (e) {
    //on touchup we cancel the touch event
    isTouched = false;
    //now if the list has moved downwards, it should come up but in a transition
    list.style.transition = "top 1s";
    if (isMoved) {
        //show the loader div
        loader.style.display = "block";
        loadNewData();
    }
    list.style.top = cssY + 'px';
    isMoved = false;

    e.preventDefault();
}, false);
list.addEventListener("touchmove", function (e) {
    if (isTouched) {
        if (e.changedTouches[0].clientY > prevY) {
            //on touchmove, we add the exact amount fingers moved to the top of the list
            var change = e.changedTouches[0].clientY - prevY;
            //and add it to the style
            list.style.top = cssY + change + 'px';
            isMoved = true;
        }
    }
    e.preventDefault();
}, false);


//binding mouse events to make this work in desktop browsers as well
list.addEventListener("mousedown", function (e) {
    isTouched = true;
    prevY = e.clientY;
    list.style.transition = "";
    e.preventDefault();
},...