स्क्रॉलबार-नाली - सीएसएस-ट्रिक्स

scrollbar-gutterसंपत्ति यह निर्धारित करने के लिए लचीलापन प्रदान करती है कि स्क्रीन पर सामग्री के साथ बातचीत करने वाले स्क्रॉलबार को प्रदर्शित करने के लिए ब्राउज़र किस स्थान का उपयोग करता है। युक्ति यह वर्णन करती है कि "स्क्रॉलबार के लिए जगह खाली करना" और इससे समझ में आता है कि आखिरकार एक गटर क्या है: एक कंटेनर जो इसमें है उसके लिए स्थान आरक्षित करता है और इसे अन्य तत्वों से अलग करता है।

इसलिए हम सभी एक ही पृष्ठ पर हैं, एक स्क्रॉलबार वह चीज़ है जो आमतौर पर ब्राउज़र के दाईं ओर होती है (औपचारिक रूप से "उपयोगकर्ता एजेंट" - या UA - इस युक्ति के रूप में संदर्भित) जो कुल में आपके स्क्रॉल की स्थिति को इंगित करता है वेबपेज पर उपलब्ध स्थान।

वे पारंपरिक रूप से एक फिसलने वाले संकेतक के साथ एक दृश्य कंटेनर रहे हैं। इन्हें क्लासिक स्क्रॉलबर्स के रूप में जाना जाता है । सूचक गटर के अंदर बैठता है और जब यह प्रदर्शित होता है तो गटर स्क्रीन पर भौतिक अचल संपत्ति लेता है।

हाल ही में, हालांकि, स्क्रॉलबार के प्रदर्शन कुछ अधिक न्यूनतम की ओर बढ़ गए हैं। हम उन ओवरले स्क्रॉलबार को कहते हैं और वे पृष्ठ सामग्री के शीर्ष पर बैठे हुए आंशिक या पूर्ण रूप से पारदर्शी होते हैं। दूसरे शब्दों में, स्क्रीन पर भौतिक अचल संपत्ति लेने वाले क्लासिक स्क्रॉलबर्स के विपरीत, ओवरले स्क्रॉलबार स्क्रीन सामग्री के शीर्ष पर बैठते हैं।

जब हम इस पर होते हैं, तो एक स्क्रॉलबार अन्य स्थानों में पॉप अप कर सकता है। ब्राउज़र के अधिकार के लिए फ्लश बैठे अलावा, हम HTML तत्वों पर स्क्रॉलबार देखेंगे जहां सामग्री तत्व और overflows overflowसंपत्ति (या overflow-xऔर overflow-y) की तैयारी में हैं scrollमूल्य। और ध्यान दें कि overflow-xहमारे पास ऊर्ध्वाधर स्क्रॉलिंग के अलावा क्षैतिज स्क्रॉलिंग है।

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

यही कारण है कि scrollbar-gutterअंदर आता है। हम पता लगा सकते हैं कि क्या गटर इसमें मौजूद है क्लासिक और ओवरले बदलाव।

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

.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )

एक डबल एम्परसेंड (&&) दो या दो से अधिक घटकों को अलग करता है, जो सभी किसी भी क्रम में होने चाहिए।

एक प्रश्न चिह्न (?) इंगित करता है कि पूर्ववर्ती प्रकार, शब्द या समूह वैकल्पिक है (शून्य या एक बार होता है)।

मूल्यों

• auto(प्रारंभिक मूल्य): अब तक वर्णित डिफ़ॉल्ट व्यवहार से बहुत अधिक। संपत्ति को इस मूल्य पर सेट करने से क्लासिक स्क्रॉलबार overflowउन तत्वों पर UI में अचल संपत्ति का उपभोग करने की अनुमति देता है जहां उन तत्वों की संपत्ति को सेट किया जाता है scrollया auto। इसके विपरीत, ओवरले स्क्रॉलबार्स तत्व के शीर्ष पर बैठकर कोई जगह नहीं लेते हैं।
• stable: यह हमेशा स्क्रॉलबार गटर के लिए स्थान को आरक्षित करके एक छोटे से विचारित व्यवहार को जोड़ता है, जब तक overflowकि एक ही तत्व पर संपत्ति सेट हो जाती है scrollया autoहम एक क्लासिक स्क्रॉलबार के साथ काम कर रहे हैं - भले ही बॉक्स अतिप्रवाह नहीं हो। इसके विपरीत, इससे ओवरले स्क्रॉलबार पर कोई प्रभाव नहीं पड़ेगा।
• always: यह उसी तरह कार्य करता है, stableलेकिन यह सुनिश्चित करता है कि स्क्रॉलबार गटर के लिए स्थान हमेशा आरक्षित रहता है, चाहे स्क्रॉलबार क्लासिक हो या ओवरले और इस बात की परवाह किए बिना कि सामग्री अतिप्रवाह है या नहीं।
• both: यह बताता है कि डिफ़ॉल्ट गटर प्रदर्शित होने पर तत्व के दोनों तरफ स्क्रॉलबार गटर रखा जाएगा। आप देख सकते हैं कि यह कैसे काम आ सकता है अगर आपके डिज़ाइन में तत्व के दोनों तरफ समान रिक्ति की आवश्यकता हो।
• force: यह दोनों को लागू करने के रूप में ही है stableऔर alwaysजहां तत्व के overflowलिए सेट है auto, scroll, visible, hiddenया clip।

युक्ति के वर्किंग ड्राफ्ट में एक सुपर हॅाडी टेबल है जो उन संदर्भों को तोड़ता है जो उन्हें क्लासिक और ओवरले स्क्रॉलबार से संबंध दिखाने के लिए उनके संदर्भों में तोड़ देता है।

		क्लासिक स्क्रॉलबार		ओवरले स्क्रॉलबार
बाढ़	स्क्रॉलबार-नाली	बह निकला	अतिप्रवाह नहीं	बह निकला	अतिप्रवाह नहीं
स्क्रॉल	ऑटो	जी	जी
	स्थिर	जीएम	जी
	हमेशा	जी	जी	जी	जी
	ऑटो	जी
	स्थिर	जी	जी
	हमेशा	जी	जी	जी	जी
दिखाई, छिपा हुआ, क्लिप	ऑटो
	स्थिर	च?	च?
	हमेशा	च?	च?	च?	च?

"जी" उन मामलों का प्रतिनिधित्व करता है जहां स्क्रॉलबार गटर के लिए स्थान आरक्षित है, "एफ?" वे स्थान जहां स्क्रॉलबार गटर के लिए स्थान आरक्षित है यदि बल निर्दिष्ट किया गया था, और रिक्त कक्ष ऐसे मामले हैं जहां कोई स्थान आरक्षित नहीं है।

विशिष्टता स्थिति

scrollbar-gutterसंपत्ति ओवरफ्लो मॉड्यूल स्तर 4, जो कार्यकारी ड्राफ्ट स्थिति में है में परिभाषित किया गया है। इसका मतलब है कि यह अभी भी प्रगति पर है और अब और समय के बीच में बदलाव कैंडिडेट की सिफारिश के अनुसार हो सकता है।

ओवरफ्लो मॉड्यूल लेवल 3 स्पेसिफिकेशन एक वर्किंग ड्राफ्ट भी है, इसलिए यह एक अच्छा संकेत है कि (1) scrollbar-gutterएक सिफारिश बनने में कुछ समय लगेगा और (2) यह अभी भी बहुत प्रगति पर है।

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

अंतिम अपडेट के समय कोई ब्राउज़र समर्थन नहीं है।

अधिक जानकारी

• सीएसएस ओवरफ्लो मॉड्यूल लेवल 4 वर्किंग ड्राफ्ट
• गिटहब अंक # 92
• टीपीएसी में सीएसएस वर्किंग ग्रुप: सीएसएस में नया क्या है? संपत्ति मूल्यों के व्यवहार को रेखांकित करने वाली तालिका के लिए एक हाथ से तैयार प्रस्ताव शामिल है।