इस लेख में हम स्क्रॉलबार की दुनिया में गोता लगाएंगे। मुझे पता है, यह बहुत ग्लैमरस नहीं लगता है, लेकिन मेरा विश्वास करो, एक अच्छी तरह से डिज़ाइन किया गया पृष्ठ मेल खाने वाले स्क्रॉलबार के साथ हाथ से जाता है। पुराने जमाने का क्रोम स्क्रॉलबार बस उतना फिट नहीं होता है।
हम स्क्रॉलबार के बारीक विवरणों को देखेंगे और फिर कुछ अच्छे उदाहरण देखेंगे।
स्क्रॉलबार के अवयव
यह वास्तव में एक पुनश्चर्या का अधिक है। वहां एक सीएसएस-ट्रिक्स पर यहीं पोस्ट का गुच्छा जब सीएसएस में कस्टम स्क्रॉलबार स्टाइलिंग की बात आती है तो यह गहन विवरण में जाता है।
स्क्रॉल बार को स्टाइल करने के लिए आपको स्क्रॉलबार की एनाटॉमी से परिचित होना चाहिए। इस दृष्टांत पर एक नज़र डालें:
यहाँ ध्यान रखने योग्य दो मुख्य घटक हैं:
- RSI ट्रैक बार के नीचे की पृष्ठभूमि है।
- RSI अंगूठा वह हिस्सा है जिसे उपयोगकर्ता क्लिक करता है और चारों ओर खींचता है।
हम विक्रेता-उपसर्ग का उपयोग करके पूर्ण स्क्रॉलबार के गुणों को बदल सकते हैं::-webkit-scrollbar चयनकर्ता। हम स्क्रॉल बार को एक निश्चित चौड़ाई, पृष्ठभूमि का रंग, गोल कोनों... बहुत सी चीजें दे सकते हैं! यदि हम किसी पृष्ठ के मुख्य स्क्रॉलबार को अनुकूलित कर रहे हैं, तो हम इसका उपयोग कर सकते हैं ::-webkit-scrollbar सीधे HTML तत्व पर:
html::-webkit-scrollbar {
/* Style away! */
}यदि हम एक स्क्रॉल बॉक्स को अनुकूलित कर रहे हैं जो कि का परिणाम है overflow: scroll, तो हम उपयोग कर सकते हैं ::-webkit-scrollbar इसके बजाय उस तत्व पर:
.element::-webkit-scrollbar {
/* Style away! */
}यहां एक त्वरित उदाहरण दिया गया है जो HTML तत्व के स्क्रॉलबार को इस तरह से स्टाइल करता है कि वह लाल पृष्ठभूमि के साथ चौड़ा हो:
क्या होगा यदि हम केवल स्क्रॉलबार के अंगूठे या ट्रैक को बदलना चाहते हैं? आपने अनुमान लगाया - हमारे पास उन दोनों के लिए विशेष उपसर्ग वाले छद्म तत्व हैं: ::-webkit-scrollbar-thumb और ::-webkit-scrollbar-track, क्रमश। जब हम इन सभी चीजों को एक साथ रखते हैं तो क्या संभव है इसका एक विचार यहां दिया गया है:
पर्याप्त ब्रश करना! मैं आपको कस्टम स्क्रॉलबार स्टाइल के तीन डिग्री दिखाना चाहता हूं, फिर प्रेरणा के लिए पूरे वेब से खींचे गए उदाहरणों का एक बड़ा ओल 'शोकेस खोलना चाहता हूं।
सरल और उत्तम दर्जे का स्क्रॉलबार
एक कस्टम स्क्रॉलबार अभी भी न्यूनतम हो सकता है। मैंने उदाहरणों के एक समूह को एक साथ रखा है जो उपस्थिति को सूक्ष्म रूप से बदलते हैं, चाहे अंगूठे या ट्रैक में मामूली रंग परिवर्तन के साथ, या पृष्ठभूमि में कुछ हल्की स्टाइलिंग हो।
जैसा कि आप देख सकते हैं, जब स्क्रॉलबार स्टाइलिंग की बात आती है तो हमें पागल होने की जरूरत नहीं है। कभी-कभी एक सूक्ष्म परिवर्तन एक स्क्रॉलबार के साथ समग्र उपयोगकर्ता अनुभव को बढ़ाने के लिए होता है जो समग्र विषय से मेल खाता है।
आकर्षक आकर्षक स्क्रॉलबार
लेकिन आइए इसे स्वीकार करें: थोड़ा ओवरबोर्ड जाने और कुछ रचनात्मकता का प्रयोग करने में मज़ा आता है। यहां कुछ अजीब और अद्वितीय स्क्रॉलबार हैं जो कुछ मामलों में "बहुत अधिक" हो सकते हैं, लेकिन वे निश्चित रूप से आकर्षक हैं।
एक और…
हम ट्रेन में घूमने के लिए स्क्रॉलबार को अंगूठे के लिए और ट्रैक के लिए ट्रैक के लिए कैसे ले सकते हैं!
