परिचय
CSS overscroll-behavior प्रॉपर्टी का उपयोग करके हम वेबपेज की सीमा क्षेत्र (boundary area) को स्क्रॉल करने के व्यवहार को नियंत्रित कर सकते हैं। इस प्रॉपर्टी के माध्यम से मोबाइल ब्राउज़र पर पुल-टू-रिफ्रेश (pull-to-refresh) फीचर को अक्षम किया जा सकता है।
सिंटैक्स
Selector { overscroll-behavior: /*value*/ }
मान (Values)
- auto - डिफ़ॉल्ट व्यवहार (पुल-टू-रिफ्रेश सक्षम)
- contain - स्क्रॉल चेनिंग को रोकता है, लेकिन एलिमेंट के अंदर स्क्रॉल करने की अनुमति देता है
- none - पूरी तरह से ओवरस्क्रॉल व्यवहार को अक्षम करता है
उदाहरण 1: एलिमेंट पर overscroll-behavior-y लागू करना
<!DOCTYPE html> <html> <head> <style> div { margin: 2%; width: 500px; height: 200px; overflow-x: auto; overscroll-behavior-y: contain; background-color: plum; } p { font-size: 1.5em; } </style> </head> <body> <h2>overscroll-behavior उदाहरण</h2> <div> <p>Pellentesque id velit non metus lacinia viverra ac congue enim. Morbi lacinia, erat nec cursus semper, arcu est scelerisque mi, eget hendrerit risus tellus ut lacus. Nunc dapibus risus quis magna posuere, ac malesuada odio ornare. Aliquam commodo dolor ipsum, at finibus libero laoreet non. Etiam mollis placerat aliquam. Maecenas gravida congue dui non hendrerit. Suspendisse varius eros id purus facilisis, sit amet sollicitudin sapien dictum.</p> </div> <p> Vestibulum ultricies diam sit amet laoreet sollicitudin. Nulla facilisis porttitor eros non sagittis. Donec rutrum a erat vitae interdum. Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida. Proin ut diam eros. Donec hendrerit euismod dui ac facilisis. Duis sodales urna dui, vitae imperdiet augue dictum tristique. Vivamus a risus enim. Donec fermentum iaculis rutrum. Nullam quis quam purus. Suspendisse potenti. Phasellus scelerisque scelerisque metus eu tristique. Nulla vitae augue non felis finibus aliquet. In ipsum elit, egestas ut arcu nec, commodo vehicula sapien. Suspendisse potenti. </p> </body> </html>
आउटपुट
उपरोक्त कोड निम्नलिखित परिणाम देगा:
उदाहरण 2: बॉडी पर overscroll-behavior लागू करना
<!DOCTYPE html> <html> <head> <style> body { overscroll-behavior: contain; text-align: center; } div { margin: 2%; width: 450px; height: 180px; overflow-x: auto; background-color: khaki; } p { font-size: 1.3em; } </style> </head> <body> <h2>बॉडी पर overscroll behavior सेट करना</h2> <div> <p>Pellentesque id velit non metus lacinia viverra ac congue enim. Morbi lacinia, erat nec cursus semper, arcu est scelerisque mi, eget hendrerit risus tellus ut lacus. Nunc dapibus risus quis magna posuere, ac malesuada odio ornare. Aliquam commodo dolor ipsum, at finibus libero laoreet non. Etiam mollis placerat aliquam. Maecenas gravida congue dui non hendrerit. Suspendisse varius eros id purus facilisis, sit amet sollicitudin sapien dictum.</p> </div> <p> Vestibulum ultricies diam sit amet laoreet sollicitudin. Nulla facilisis porttitor eros non sagittis. Donec rutrum a erat vitae interdum. Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida. Proin ut diam eros. Donec hendrerit euismod dui ac facilisis. Duis sodales urna dui, vitae imperdiet augue dictum tristique. Vivamus a risus enim. Donec fermentum iaculis rutrum. Nullam quis quam purus. Suspendisse potenti. Phasellus scelerisque scelerisque metus eu tristique. Nulla vitae augue non felis finibus aliquet. In ipsum elit, egestas ut arcu nec, commodo vehicula sapien. Suspendisse potenti. </p> </body> </html>
आउटपुट
उपरोक्त कोड निम्नलिखित परिणाम देगा:
मोबाइल ब्राउज़र पर आउटपुट
मोबाइल ब्राउज़र पर यह इस प्रकार दिखाई देगा:
ब्राउज़र सपोर्ट
overscroll-behavior प्रॉपर्टी सभी आधुनिक ब्राउज़रों (Chrome 63+, Firefox 59+, Safari 15.4+, Edge 79+) में समर्थित है।
सर्वोत्तम अभ्यास
- पूरे पेज पर पुल-टू-रिफ्रेश अक्षम करने के लिए
body { overscroll-behavior: none; }का उपयोग करें - विशिष्ट स्क्रॉलेबल कंटेनर के लिए
overscroll-behavior: containका उपयोग करें - उपयोगकर्ता अनुभव को ध्यान में रखते हुए केवल आवश्यक स्थानों पर ही इसे लागू करें
