pull to refresh बंद करें: CSS overscroll-behavior का तरीका

pull to refresh बंद करने के लिए पेज के scrolling element (आम तौर पर body या html) पर overscroll-behavior-y: contain सेट करें:

body {
  overscroll-behavior-y: contain;
}

यह Chrome के इस property पर लेख का एक-पंक्ति का उदाहरण है। लेख कहता है कि यह pull-to-refresh बंद करता है पर overscroll की चमक बनाए रखता है (Chrome for Developers, 2017)। यह property नियंत्रित करती है कि scroll किसी scroll container के किनारे पहुँचे तो क्या होता है, और MDN इसके उपयोगों में browser के “pull to refresh” जैसे व्यवहार को हटाना गिनाता है (MDN, अक्टूबर 2026)। समर्थन एक जैसा नहीं है: MDN overscroll-behavior को Baseline नहीं मानता, और Safari का समर्थन अधूरा है, इसलिए जिन फ़ोनों को आप सपोर्ट करते हैं उन पर जाँचें।

overscroll-behavior क्या करता है

overscroll-behavior तय करता है कि किनारे तक पहुँचने वाला scroll parent तक जाए या नहीं, और browser अपना overscroll प्रभाव दिखाए या नहीं। MDN के अनुसार, डिफ़ॉल्ट रूप से मोबाइल browsers पेज या scroll area के ऊपरी या निचले सिरे पर पहुँचने पर bounce प्रभाव, या यहाँ तक कि पेज refresh भी दे सकते हैं। इस property के चार keywords हैं (MDN की परिभाषाएँ):

Scroll chaining browser का डिफ़ॉल्ट व्यवहार है कि child के किनारे पहुँचने पर scroll को parent को सौंप दिया जाए: Chrome का उदाहरण है कि app drawer के नीचे पहुँचने पर उसके पीछे का पेज scroll होने लगता है। overscroll-behavior, overscroll-behavior-x और overscroll-behavior-y का shorthand है, और दो keywords दिए जाएँ तो वे क्रम से x और y पर लागू होते हैं।

pull to refresh के लिए contain या none

अगर refresh रोकना है पर platform की overscroll प्रतिक्रिया बनाए रखनी है, तो contain इस्तेमाल करें; और अगर प्रभाव भी हटाना है, तो none। Chrome का लेख contain को ऐसे बताता है कि वह scroll chaining रोकता है, जबकि Android के overscroll glow जैसे स्थानीय प्रभाव दिखते रहते हैं, और none वही है जिसमें प्रभाव भी हट जाते हैं। पेज पर ही pull to refresh रोकने के लिए:

/* pull to refresh रोकें, glow रहने दें */
body { overscroll-behavior-y: contain; }

/* glow और rubber-banding भी हटाएँ */
body { overscroll-behavior-y: none; }

Chrome का लेख यह भी नोट करता है कि html पर contain overscroll navigation को रोकता है, और कि horizontal none बाएँ-दाएँ swipe navigation रोकने के लिए था, जो 2017 में लेख लिखे जाने तक Chrome में लागू नहीं हुआ था। swipe gestures पर भरोसा करने से पहले मौजूदा व्यवहार जाँचें।

pull to refresh बंद करने से वह gesture हट जाता है जिससे लोग पेज को reload करते हैं। अगर पेज live data दिखाता है, तो उपयोगकर्ताओं को refresh button या अपना pull gesture दें, क्योंकि browser वाला अब नहीं रहेगा।

body या scroll container

property को उसी element पर रखें जो scroll होता है, क्योंकि वह केवल scroll containers पर लागू होती है। पूरे पेज के लिए वह viewport तय करने वाला element है, यानी html या body। किसी अंदरूनी panel, drawer या chat list के लिए उसी panel पर सेट करें:

.chat-list {
  height: 12em;
  overflow: auto;
  overscroll-behavior: contain;
}

इससे जब उपयोगकर्ता list के आखिर तक पहुँचता है, तो panel के पीछे का पेज scroll नहीं होता; MDN का उदाहरण dialogs के लिए यही pattern इस्तेमाल करता है। MDN की दो बातें:

• वह scroll container जिसमें scrollable overflow नहीं है, जैसे overflow: hidden वाला element, हमेशा अपनी scroll सीमा पर होता है, इसलिए उस पर गैर-डिफ़ॉल्ट overscroll-behavior ancestors तक chaining रोक देता है। MDN कहता है कि इससे dialog या overlay खुले होने पर पृष्ठभूमि का scroll रुक सकता है।
• <iframe> scroll container नहीं है, इसलिए यह property iframe element पर असर नहीं डालती। iframe के भीतर से chaining नियंत्रित करने के लिए इसे iframe के document के html और body, दोनों पर सेट करें।

2026 में browser समर्थन

keywords auto, contain और none MDN browser-compat-data 8.1.7 (अक्टूबर 2026) के अनुसार क्रमशः Chrome 63, Firefox 59 और Safari 16 (Safari iOS 16) से समर्थित हैं। Safari का समर्थन आंशिक चिह्नित है: यह property उन scroll containers पर असर नहीं करती जिनमें scrollable overflow नहीं है, और Samsung Internet पर भी यही आंशिक समर्थन की टिप्पणी है। chain keyword नया है: BCD इसे Chrome 150 और Firefox 157 से सूचीबद्ध करता है, Safari में नहीं। BCD में इस property की एक अलग top-level प्रविष्टि भी है, जो Chrome 144 और Firefox 150 से शुरू होती है। इसलिए web-features 3.44.0 overscroll-behavior को Baseline नहीं गिनता, और MDN इसे “Baseline नहीं” कहता है, क्योंकि यह सबसे ज़्यादा इस्तेमाल होने वाले कुछ browsers में काम नहीं करता।

pull to refresh के लिए इसका मतलब: contain या none के साथ लंबा रूप overscroll-behavior-y वही है जो Chrome का लेख इस्तेमाल करता है, और Safari 16 ने इस property को जोड़ा (WebKit, सितंबर 2022)। लेकिन WebKit के release notes या MDN में यह नहीं लिखा कि iPhone पर Safari पेज-स्तर का refresh gesture रोकता है या नहीं, इसलिए iPhone पर ही जाँचें।

फ़ोन पर इसे कैसे टेस्ट करें

pull to refresh एक touch gesture है, इसलिए असली device या emulator पर टेस्ट करें।

1. फ़ोन पर पेज लोड करें, बिल्कुल ऊपर तक scroll करें, फिर नीचे खींचें। CSS के बिना browser refresh या bounce कर सकता है। body पर overscroll-behavior-y: contain होने पर कुछ भी reload नहीं होना चाहिए।
2. किसी nested panel को आखिर तक scroll करें और खींचते रहें। अगर panel पर contain है, तो उसके पीछे का पेज स्थिर रहना चाहिए।
3. हर उस browser में दोहराएँ जिसे आप सपोर्ट करते हैं। Android पर Chrome, iPhone पर Safari और Samsung Internet की अपनी टिप्पणियाँ ऊपर हैं।
4. अगर आप कोई installed web app देते हैं, तो उसमें भी दोहराएँ; प्लेटफ़ॉर्म के हिसाब से इंस्टॉलेशन कैसे अलग है, इसके लिए progressive web app क्या है देखें।

desktop से Android की जाँच के लिए desktop से Android पर वेबसाइट टेस्ट करना देखें। बिना फ़ोन के iOS के लिए iPhone के बिना iPhone पर टेस्ट करना देखें, और मोबाइल टेस्ट के बाकी हिस्से के लिए मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट।

Mobile View Extension tab को फ़ोन के user agent, screen size और pixel ratio के साथ दोबारा लोड करता है, इसलिए यह आपका layout और कौन सा पेज परोसा जा रहा है, वह दिखाता है; पर यह mouse से चलता है। इसमें touch events नहीं भेजे जाते, इसलिए आप इसमें पेज को pull करके refresh नहीं कर सकते, और यह desktop Chrome का engine चलाता है, इसलिए Safari का व्यवहार दोहराया नहीं जाता। किसी custom refresh button का layout जाँचने के लिए इसका इस्तेमाल करें, और gesture के लिए device या simulator।

अक्सर पूछे जाने वाले सवाल

CSS में pull to refresh कैसे बंद करूँ?

body या html पर overscroll-behavior-y: contain सेट करें। Chrome का लेख इसे एक पंक्ति बताता है जो overscroll की चमक रखते हुए pull-to-refresh बंद करती है; चमक भी हटाने के लिए none इस्तेमाल करें।

overscroll-behavior में contain और none का फ़र्क क्या है?

contain scroll chaining रोकता है पर फिर भी bounce प्रभाव दिख सकता है, जबकि none chaining और bounce, दोनों रोकता है (MDN)। पेज पर pull to refresh के लिए, Chrome के लेख के अनुसार दोनों Chrome में refresh रोकते हैं।

क्या overscroll-behavior Safari में काम करता है?

Safari 16 और बाद के versions इस property को सपोर्ट करते हैं, पर अधूरे रूप में: यह उन scroll containers पर असर नहीं करता जिनमें scrollable overflow नहीं है (MDN browser-compat-data 8.1.7)। पेज-स्तर के gesture का क्या होता है, यह iPhone पर जाँचें।

scroll chaining क्या है?

scroll chaining वह है जब child container अपनी scroll सीमा तक पहुँचता है और browser scroll को parent container को सौंप देता है; जैसे dialog के आखिर पर पहुँचने से उसके पीछे का पेज scroll होने लगे। overscroll-behavior: contain इसे रोकता है।