श्रेणी: डेवलपर टूल
CSS स्क्रॉलबार जनरेटर
लाइव पूर्वावलोकन के साथ कस्टम स्क्रॉलबार CSS स्थानीय रूप से बनाएँ
लाइव पूर्वावलोकन के साथ कस्टम स्क्रॉलबार डिज़ाइन करें और scrollbar-color, scrollbar-width तथा WebKit स्टाइल का CSS कॉपी करें। आपके ब्राउज़र में तैयार।
पूर्वावलोकन
/* Standard properties: Firefox, and Chrome/Edge 121+ */
.scroll-area {
scrollbar-color: #8a9a8f #eceee9;
scrollbar-width: thin;
}
/* Non-standard WebKit prefix, for older Chrome, Edge and Safari */
.scroll-area::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.scroll-area::-webkit-scrollbar-track {
background: #eceee9;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
background: #8a9a8f;
border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
background: #6f8076;
}
scrollbar-color और scrollbar-width मानक गुण हैं और Firefox तथा मौजूदा Chrome यही इस्तेमाल करते हैं। ::-webkit- नियम एक ग़ैर-मानक उपसर्ग हैं जो पुराने Chrome, Edge और Safari के लिए रखे गए हैं — दोनों इंजन एक जैसा प्रदर्शित नहीं करेंगे।
पूर्वावलोकन और बनाया गया CSS, दोनों आपके ब्राउज़र में ही तैयार होते हैं।
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
स्क्रॉलबार की सजावट दो तंत्रों में बँटी है। CSS Scrollbars Styling मॉड्यूल आपको `scrollbar-color` और `scrollbar-width` देता है: दो गुण, Firefox सहित व्यापक समर्थन, और जान-बूझकर सीमित नियंत्रण। पुराने `::-webkit-scrollbar` छद्म-तत्व कहीं अधिक देते हैं, पर वे ग़ैर-मानक उपसर्ग हैं। यह जनरेटर पहले मानक गुण और उसके बाद लेबल लगा WebKit ब्लॉक निकालता है, ताकि व्यापक कवरेज मिले और यह दिखावा भी न हो कि दोनों एक ही चीज़ हैं। दोनों का प्रदर्शन एक जैसा नहीं होगा, और स्क्रॉलबार वह नियंत्रण है जिस पर लोग सचमुच निर्भर करते हैं — इसीलिए यहाँ का पूर्वावलोकन तस्वीर दिखाने के बजाय सचमुच स्क्रॉल होता है।
इस्तेमाल कैसे करें
- जिस तत्व को सजाना है उसका सिलेक्टर तय करें, फिर थंब, ट्रैक और होवर के रंग चुनें।
- scrollbar-width चुनें और WebKit की चौड़ाई तथा त्रिज्या सेट करें।
- जाँचने के लिए पूर्वावलोकन स्क्रॉल करें, फिर CSS कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या कस्टम स्क्रॉलबार हर ब्राउज़र में काम करते हैं?
- एक जैसे नहीं। scrollbar-color और scrollbar-width Firefox तथा मौजूदा Chrome और Edge में काम करते हैं; ::-webkit- नियम पुराने Chrome, Edge और Safari को संभालते हैं। टूल दोनों देता है, पर दोनों इंजन स्क्रॉलबार अलग तरह से बनाते हैं और कोई भी CSS उन्हें बिलकुल एक जैसा नहीं कर सकता।
- scrollbar-color क्या है?
- वह मानक गुण जो थंब और ट्रैक के रंग एक ही घोषणा में तय करता है — पहले थंब, फिर ट्रैक। यह CSS Scrollbars Styling मॉड्यूल का हिस्सा है, इसलिए शुरुआत इसी से करनी चाहिए।
- WebKit वाला CSS क्यों शामिल करें?
- क्योंकि मानक गुण केवल रंग और मोटे तौर पर चौड़ाई देते हैं, और पुराने WebKit तथा Blink उन्हें समर्थित नहीं करते। उपसर्ग वाले नियम स्पष्ट आकार और त्रिज्या जोड़ते हैं और उन ब्राउज़रों को संभालते हैं।
- क्या मुझे स्क्रॉलबार पूरी तरह छिपा देनी चाहिए?
- सावधानी से। scrollbar-width: none वह दृश्य संकेत हटा देता है जो बताता है कि क्षेत्र स्क्रॉल होता है, और उसे खींचकर चलाने का ज़रिया भी। जो लोग स्क्रॉल व्हील या ट्रैकपैड नहीं इस्तेमाल करते, उन्हें नुकसान होता है। इसके बजाय पतली, अच्छे कंट्रास्ट वाली पट्टी पर विचार करें।