Refresh mobile screen on pulldown code

Custom Coding
,
1

Here you go, this worked for me on mobile.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pull to Refresh</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .content {
      padding: 20px;
    }
    .refresh-message {
      display: none;
      text-align: center;
      padding: 10px;
      background-color: #f0f0f0;
      border-bottom: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="refresh-message" id="refreshMessage">Refreshing...</div>
  <div class="content">
    <h1>Pull to Refresh Example</h1>
    <p>Drag down to refresh the page.</p>
    <!-- Your content here -->
  </div>

  <script>
    let startY = 0;
    let isPulling = false;
    const refreshMessage = document.getElementById('refreshMessage');

    window.addEventListener('touchstart', (e) => {
      if (window.scrollY === 0) {
        startY = e.touches[0].pageY;
        isPulling = true;
      }
    });

    window.addEventListener('touchmove', (e) => {
      if (isPulling) {
        const currentY = e.touches[0].pageY;
        if (currentY - startY > 50) {
          refreshMessage.style.display = 'block';
        }
      }
    });

    window.addEventListener('touchend', () => {
      if (isPulling) {
        isPulling = false;
        if (refreshMessage.style.display === 'block') {
          location.reload();
        }
      }
    });
  </script>
</body>
</html>
1 Like