HTML के साथ Android Chrome का पुल-डाउन-टू-रिफ्रेश फीचर अक्षम करें

पुल-टू-रिफ्रेश अक्षम करना

Chrome Android में पुल-डाउन-टू-रिफ्रेश (नीचे खींचकर रीफ्रेश) फीचर डिफ़ॉल्ट रूप से सक्षम होता है। कुछ वेब ऐप्स में यह अवांछित व्यवहार हो सकता है, विशेष रूप से जब ऐप का अपना रीफ्रेश तंत्र हो या जब स्क्रॉल कंटेनर नेस्टेड हों।

CSS समाधान: overscroll-behavior

आधुनिक और मानक तरीका CSS overscroll-behavior प्रॉपर्टी का उपयोग करना है:

/* पूरे पेज के लिए पुल-टू-रिफ्रेश अक्षम करें */
body {
    /* पुल-टू-रिफ्रेश अक्षम करता है लेकिन ओवरस्क्रॉल ग्लो प्रभाव अनुमति देता है */
    overscroll-behavior-y: contain;
}

/* या पूरी तरह से ओवरस्क्रॉल अक्षम करें */
html, body {
    overscroll-behavior: none;
}

overscroll-behavior मान

पूर्ण उदाहरण

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>पुल-टू-रिफ्रेश अक्षम</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overscroll-behavior-y: contain; /* पुल-टू-रिफ्रेश अक्षम */
        }
        .app-container {
            height: 100%;
            overflow-y: auto; /* आंतरिक स्क्रॉलिंग */
        }
        .header {
            position: sticky;
            top: 0;
            background: #2196F3;
            color: white;
            padding: 15px;
            text-align: center;
            z-index: 10;
        }
        .content {
            padding: 20px;
        }
        .chat-messages {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            background: #fafafa;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="header">चैट ऐप (पुल-टू-रिफ्रेश अक्षम)</div>
        <div class="content">
            <h3>चैट संदेश</h3>
            <div class="chat-messages">
                <p>संदेश 1</p>
                <p>संदेश 2</p>
                <p>संदेश 3</p>
                <!-- अधिक संदेश -->
            </div>
            <p>यह क्षेत्र स्वतंत्र रूप से स्क्रॉल होता है बिना पेज रीफ्रेश ट्रिगर किए।</p>
        </div>
    </div>
</body>
</html>

ब्राउज़र समर्थन

• Chrome 63+ (Android)
• Firefox 59+
• Edge 79+
• Safari 16+ (iOS 16+)
• नहीं समर्थित: पुराने ब्राउज़र्स, UC Browser, कुछ कस्टम WebViews

पुराने ब्राउज़र्स के लिए फॉलबैक (Touch इवेंट्स)

<script>
// टच-आधारित फॉलबैक (सीमित प्रभावशीलता)
let startY = 0;
let isAtTop = true;

document.addEventListener('touchstart', (e) => {
    startY = e.touches[0].clientY;
    isAtTop = window.scrollY === 0;
}, { passive: true });

document.addEventListener('touchmove', (e) => {
    if (isAtTop && e.touches[0].clientY > startY) {
        // नीचे खींच रहे हैं जबकि शीर्ष पर - रोकें
        e.preventDefault();
    }
}, { passive: false }); // passive: false आवश्यक है preventDefault के लिए
</script>

सर्वोत्तम प्रथा

CSS overscroll-behavior-y: contain को body या स्क्रॉल कंटेनर पर लागू करें। यह सबसे साफ, प्रदर्शनकारी, और मानक-अनुरूप समाधान है।