Native js imitates mobile phone pull-down refresh

<div class="content">
        <div class="left"></div>
        <div class="top">
            <p id="p"></p>
            <div id="buttom">
            </div>
        </div>
</div>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .content {
        width: 350px;
        height: 600px;
        position: relative;
        margin: 0 auto;
    }
    
    .top {
        width: 100%;
        height: 100%;
        background-color: #ccc;
        border: 12px solid black;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 50px;
        border-top: 35px solid black;
    }
    
    #button {
        width: 100%;
        height: 100%;
        background-color: rgb(47, 196, 47);
        position: relative;
        padding: 10px;
        border-top: 2px solid red;
    }
    
    #p {
        display: inline-block;
        height: 30px;
        width: 100%;
        text-align: center;
        line-height: 30px;
        color: rgb(2, 2, 2);
        font-size: 15px;
        position: absolute;
        top: 40px;
        left: 0;
        display: none;
    }
    
    .left {
        height: 10px;
        width: 100px;
        background-color: #ccc;
        position: absolute;
        top: 12px;
        left: 110px;
        border-radius: 5px;
    }
    
    .left::after {
        display: inline-block;
        content: "";
        width: 15px;
        height: 15px;
        background-color: #ccc;
        border-radius: 50%;
        position: absolute;
        left: 120px;
        top: -2px;
    }
</style>

<script>
    var but = document.getElementById("buttom");
    var p = document.getElementById("p");
    var moveY = 0 //Initialize the position when pressed var tops = 0; //Initialize tops. tops is the distance of the pull-downbut.onmousedown = function(e) { //Mouse press eventmoveY = e.offsetY //Get the Y-axis position when the mouse is pressedbut.onmousemove = function(e) { //Mouse move eventp.innerHTML = "Pull down to refresh"
            p.style.display = "block"; //When the mouse moves, the text is displayed as "pull down to refresh"
            tops = e.offsetY - moveY //tops size is the distance the mouse moves on the Y axis minus the distance when pressed if (tops < 0) {
                tops = 0 //Stop pull-up } else if (tops > 40) {
                //When tops is greater than 40, it prompts that you can release the mouse to refresh immediately p.innerHTML = "Release to refresh immediately"
            }
            this.style.top = tops + 'px'; //Let the top value of the element relative positioning equal the value of tops // console.log(tops)
        }
        but.onmouseup = function() { //Mouse release event but.onmousemove = null //Clear mouse movement events to prevent elements from continuing to follow the mouse if (tops < 40) {
                //If the pull-down distance b is less than 40px, the element will be reset immediately without refreshing, and the prompt text will disappear this.style.top = 0;
                p.style.display = "none"
            } else {
                //If the pull-down distance is greater than 40px, it will prompt that it is refreshing p.innerHTML = "Refreshing . . ."
                setTimeout(() => { //Reset after 1.3 seconds delay. This is just a simulation. In actual projects, tops = 0 needs to be reset after successfully re-requesting data.
                    this.style.top = tops;
                    p.style.display = "none"
                }, 1300);
            }
        }
    }
</script>