अतिप्रवाह-लंगर - सीएसएस-ट्रिक्स

overflow-anchorसंपत्ति स्क्रॉल एंकरिंग, जो एक ब्राउज़र सुविधा उपयोगकर्ता के स्थान को बदलने के लिए एक बार उस सामग्री को पूरी तरह से लोड किया गया है के बिना उपयोगकर्ता की वर्तमान डोम स्थान ऊपर लोड करने के लिए सामग्री की अनुमति करने का इरादा है से बाहर निकलना करने के लिए हमें सक्षम बनाता है।

व्हाई वी नीड इट

स्क्रॉल एंकरिंग एक ब्राउज़र सुविधा है जो एक सामान्य स्थिति को रोकने का प्रयास करती है जहां आप डोम को पूरी तरह से लोड होने से पहले एक वेबपेज को नीचे स्क्रॉल कर सकते हैं और जब ऐसा होता है, तो आपके वर्तमान स्थान के ऊपर लोड होने वाले कोई भी तत्व आपको पृष्ठ को नीचे धकेलते हैं।

यह समझ में आता है कि ऐसा क्यों होता है। सीएसएस गुण हैं जो हम उन तत्वों पर लागू होते हैं जो उन्हें आकार (जैसे width), आकार (जैसे transform) और स्थिति (जैसे margin) देते हैं। यदि उन तत्वों को जब तक हमने पृष्ठ को नीचे स्क्रॉल नहीं किया है, तब तक डोम उन्हें लोड करना जारी रखेगा, भले ही वे हमारे वर्तमान व्यूपोर्ट के बाहर हों और उन ताजा भरे तत्वों के लिए जगह बनाने के लिए शारीरिक रूप से विस्तार करेंगे। जैसे ही DOM बढ़ता है, पेज पर हमारी स्थिति उन तत्वों को समायोजित करने के लिए बदल जाती है।

स्क्रॉल एंकरिंग उस स्थान पर उपयोगकर्ता की स्थिति को लॉक करके "कूद" अनुभव को रोकता है जबकि वर्तमान स्थान के ऊपर डोम में परिवर्तन हो रहे हैं। यह उपयोगकर्ता को एंकर रहने की अनुमति देता है जहां वे पृष्ठ पर होते हैं यहां तक ​​कि नए तत्वों को डोम पर लोड किया जाता है।

overflow-anchorसंपत्ति हमें घटना है कि यह सामग्री फिर से प्रवाह के रूप में तत्वों लोड किए गए हैं होने के लिए अनुमति देने के लिए पसंद किया जाता है में ऑप्ट आउट स्क्रॉल एंकरिंग सुविधा के लिए अनुमति देता है।

वाक्य - विन्यास

article ( overflow-anchor: (auto | none ); )

मूल्यों

overflow-anchorसंपत्ति दो मानों कि क्या है या नहीं अनिवार्य रूप से टॉगल सुविधा सक्षम है स्वीकार करता है।

• auto (डिफ़ॉल्ट): उस पृष्ठ या तत्व के भाग पर एंकरिंग स्क्रॉल करता है, जिस पर इसे लागू किया जाता है।
• none: किसी वेबपेज के सभी भाग या सभी में स्क्रॉलिंग एंकरिंग को अक्षम कर देता है, या एएनएल के हिस्से को लंगर से हटा दिया जाता है, जिससे सामग्री को हटा दिया जा सकता है।

आप शायद इसे लागू करेंगे body, लेकिन आप इसे किसी भी चयनकर्ता को दे सकते हैं, और यदि यह तत्व स्क्रॉल करता है तो यह प्रभावी होगा।

डेमो

इस डेमो में, जैसे ही आप किसी एक बॉक्स में स्क्रॉल करेंगे, यह उस डिव के शीर्ष पर हरे रंग के बॉक्स का एक गुच्छा जोड़ देगा। आम तौर पर वह सामग्री को तुरंत नीचे धकेल देता है, संभवतः एक बड़ी व्याकुलता और पाठ में अपना स्थान खो देता है। के साथ overflow-anchor: auto;, स्क्रॉलिंग स्थान संरक्षित है। overflow-anchor: none;स्क्रॉल किए गए स्थिति को प्रभावित करने के लिए नव-सम्मिलित divs की अनुमति देता है।

CodePen पर क्रिस कॉयर (@chriscoyier) द्वारा पेन ओवरफ्लो-एंकर देखें।

एक और चीज जो कि की जा सकती है वह सुपर डुपर उपयोगी हो सकती है एक तत्व की स्क्रॉल स्थिति को नीचे तक पिन करें। उदाहरण के लिए, एक चैट ऐप जहां नए संदेश डीओएम में सबसे नीचे जोड़े जाते हैं, और आप चाहते हैं कि सभी नए संदेश दिखाते हुए स्क्रॉल स्थिति नीचे रहे।

CodePen
पर क्रिस कॉयर (@chriscoyier) द्वारा स्क्रॉल-एंकर के साथ पेन "सबसे नीचे रहें" स्क्रॉल देखें।

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

इस लेखन के रूप में, overflow-anchorवर्तमान W3C मानक नहीं है, हालांकि प्रस्तावित विनिर्देश की ड्राफ्ट रिपोर्ट पढ़ने के लिए उपलब्ध है और संस्करण 56 से क्रोम द्वारा अपनाया गया है। मोज़िला फ़ायरफ़ॉक्स में एक समान सुविधा पर विचार कर रहा है। चूंकि अधिक ब्राउज़र स्क्रॉल एंकरिंग सुविधा को अपनाते हैं, इसलिए हम overflow-anchorइस सुविधा से बाहर निकलने के लिए स्पष्ट नियंत्रण देने के लिए अधिक ब्राउज़र समर्थन देखने की उम्मीद कर सकते हैं।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
56	६६	नहीं न	। ९	नहीं न

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	नहीं न

अधिक जानकारी

• स्क्रॉल एंकरिंग: स्क्रॉल एंकरिंग विनिर्देश का प्रस्तावित मसौदा
• क्रोमियम ब्लॉग: क्रोम एंकरिंग को स्क्रॉल एंकरिंग और सीएसएस संपत्ति को संस्करण 56 में शामिल करने की घोषणा करने वाला ब्लॉग पोस्ट
• Bugzilla टिकट # 43114: फ़ायरफ़ॉक्स में संपत्ति को शामिल करने के लिए टिकट खोलें