ネイティブ js が携帯電話のプルダウン更新を模倣

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

<スタイル>
    * {
        マージン: 0;
        パディング: 0;
        ボックスのサイズ: 境界線ボックス;
    }
    
    。コンテンツ {
        幅: 350ピクセル;
        高さ: 600px;
        位置: 相対的;
        マージン: 0 自動;
    }
    
    .トップ{
        幅: 100%;
        高さ: 100%;
        背景色: #ccc;
        境界線: 12px 黒一色;
        境界線の半径: 10px;
        オーバーフロー: 非表示;
        上マージン: 50px;
        border-top: 35px 黒一色;
    }
    
    ＃ボタン {
        幅: 100%;
        高さ: 100%;
        背景色: rgb(47, 196, 47);
        位置: 相対的;
        パディング: 10px;
        border-top: 2px 赤実線;
    }
    
    #p {
        表示: インラインブロック;
        高さ: 30px;
        幅: 100%;
        テキスト配置: 中央;
        行の高さ: 30px;
        色: rgb(2, 2, 2);
        フォントサイズ: 15px;
        位置: 絶対;
        上: 40px;
        左: 0;
        表示: なし;
    }
    
    。左 {
        高さ: 10px;
        幅: 100ピクセル;
        背景色: #ccc;
        位置: 絶対;
        上: 12px;
        左: 110px;
        境界線の半径: 5px;
    }
    
    .left::after {
        表示: インラインブロック;
        コンテンツ： "";
        幅: 15px;
        高さ: 15px;
        背景色: #ccc;
        境界線の半径: 50%;
        位置: 絶対;
        左: 120px;
        上: -2px;
    }
</スタイル>

<スクリプト>
    var but = document.getElementById("buttom");
    var p = document.getElementById("p");
    var moveY = 0 // 押されたときの位置を初期化します var tops = 0; // tops を初期化します。 tops はプルダウンの距離ですbut.onmousedown = function(e) { //マウス押下イベントmoveY = e.offsetY //マウスが押されたときの Y 軸の位置を取得しますbut.onmousemove = function(e) { //マウス移動イベントp.innerHTML = "Pull down to refresh"
            p.style.display = "block"; //マウスを動かすと、テキストは「下に引いて更新」と表示されます
            tops = e.offsetY - moveY //topsのサイズは、マウスがY軸上で移動する距離から、マウスが押されたときの距離を引いたものです。if (tops < 0) {
                tops = 0 // プルアップを停止 } else if (tops > 40) {
                //tops が 40 より大きい場合、マウスを放すとすぐに更新できるというメッセージが表示されます。p.innerHTML = "放すとすぐに更新されます"
            }
            this.style.top = tops + 'px'; //要素の相対位置の top 値を tops の値と同じにします // console.log(tops)
        }
        but.onmouseup = function() { //マウスリリースイベント but.onmousemove = null //マウス移動イベントをクリアして、要素がマウスを追い続けるのを防ぎます if (tops < 40) {
                // プルダウン距離 b が 40px 未満の場合、要素は更新されずにすぐにリセットされ、プロンプト テキストは消えます this.style.top = 0;
                p.style.display = "なし"
            } それ以外 {
                // プルダウン距離が 40 ピクセルより大きい場合は、更新中であることを示すプロンプトが表示されます。p.innerHTML = "更新中..."
                setTimeout(() => { // 1.3 秒の遅延後にリセットします。これは単なるシミュレーションです。実際のプロジェクトでは、データの再要求に成功した後、tops = 0 をリセットする必要があります。
                    this.style.top = トップス;
                    p.style.display = "なし"
                }, 1300);
            }
        }
    }
</スクリプト>