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

स्टाइलिंग स्क्रॉलबार का संक्षिप्त इतिहास:

यह एक ऐसी चीज हुआ करता था, जिसमें इंटरनेट एक्सप्लोरर केवल (प्राचीन संस्करण) जैसे सामान के साथ कर सकता था -ms-scrollbar-base-color। ये अब मौजूद नहीं हैं।
तब WebKit- आधारित ब्राउज़र इंजन की तरह सामान के साथ बोर्ड पर चढ़ गया ::-webkit-scrollbar। यही आलमनैक प्रविष्टि ज्यादातर कवर करती है, क्योंकि यह आज सफारी / क्रोम परिदृश्य में काम करती है।
मानकों ने अंत में शामिल कर लिया है, और उन स्टाइलिंग विकल्पों को स्क्रॉल-कलर और स्क्रॉलबार-चौड़ाई जैसे अन-प्रीफ़िक्स किए गए गुणों द्वारा कवर किया गया है।

सफ़ारी / क्रोम दुनिया के लिए स्टाइलिंग स्क्रॉलबार -webkitविक्रेता के उपसर्ग के पीछे उजागर होते हैं ।

यह पंचांग प्रविष्टि एक अवलोकन है, कस्टम स्क्रॉलबारों के साथ काम करने के अधिक पूर्ण विराम के लिए, कृपया इस CSS-Tricks लेख को पढ़ें।

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

-webkit-scrollbarसंपत्तियों की परिवार सात विभिन्न छद्म तत्वों है कि, एक साथ, एक पूर्ण स्क्रॉलबार यूआई तत्व शामिल होते हैं:

::-webkit-scrollbarबार की पृष्ठभूमि को संबोधित करता है। यह आमतौर पर अन्य तत्वों द्वारा कवर किया जाता है
::-webkit-scrollbar-button स्क्रॉलबार पर दिशात्मक बटन को संबोधित करता है
::-webkit-scrollbar-track खाली स्थान "नीचे" को प्रगति बार संबोधित करता है
::-webkit-scrollbar-track-piece ड्रैग करने योग्य स्क्रॉलिंग तत्व (अंगूठे) द्वारा कवर नहीं की गई प्रगति पट्टी की सबसे ऊपरी परत है
::-webkit-scrollbar-thumb स्क्रॉल करने योग्य तत्व के आकार के आधार पर आकार बदलने वाले स्क्रॉलिंग तत्व को संबोधित करता है
::-webkit-scrollbar-corner स्क्रॉल करने योग्य तत्व के नीचे (आमतौर पर) कोने को संबोधित करते हैं, जहां दो स्क्रॉलबार मिल सकते हैं
::-webkit-resizerड्रैग करने योग्य आकार बदलने वाले हैंडल को संबोधित करता है scrollbar-cornerजो कुछ तत्वों के निचले कोने में ऊपर दिखाई देता है

इन छद्म तत्वों के अलावा, ग्यारह छद्म चयनकर्ता वर्ग भी हैं जिनकी आवश्यकता नहीं है, लेकिन विभिन्न राज्यों को स्क्रॉल करने और UI की बातचीत करने की शक्ति प्रदान करने के लिए डिज़ाइनर प्रदान करते हैं। उन छद्म चयनकर्ताओं का पूर्ण विराम और एक विस्तृत उदाहरण इस सीएसएस-ट्रिक्स लेख में पाया जा सकता है।

इस पेन को देखें!

ब्याज के अंक

यदि विभिन्न छद्म तत्वों से पहले कोई योग्य चयनकर्ता नहीं है, तो शैली पृष्ठ पर दिखाई देने वाले किसी भी स्क्रॉलबार पर लागू होगी।
-webkit-scrollbarशैलियों की स्थापना करना एक अच्छा तरीका है जो आपके वेबपेज को मैक ओएस के संस्करणों पर क्षैतिज या ऊर्ध्वाधर स्क्रॉलबार को शेर की तुलना में नया दिखाने के लिए मजबूर करता है, जिस पर स्क्रॉलबार आमतौर पर डिफ़ॉल्ट रूप से छिपे होते हैं।
चूंकि यह संपत्ति एक -webkitविक्रेता उपसर्ग के पीछे है , इसलिए कई jQuery प्लगइन्स को "पॉलीफ़िल" लिखा गया है या इस कार्यक्षमता को अन्य ब्राउज़रों तक विस्तारित किया गया है। ऐसा ही एक प्लगइन है jScrollPane।