कस्टम CSS स्क्रॉलबार जनरेटर
डिफ़ॉल्ट ग्रे स्क्रॉलबार की जगह अपनी साइट के रंगों वाला स्क्रॉलबार बनाएँ: चौड़ाई, रंग और गोलाई बदलें, लाइव प्रीव्यू देखें, फिर इस्तेमाल के लिए तैयार CSS कोड कॉपी करें। सब कुछ आपके ब्राउज़र में लोकल रूप से गणना होता है।
प्रीव्यू में ::-webkit-scrollbar प्रॉपर्टी (Chrome, Edge, Safari) और scrollbar-color (Firefox) इस्तेमाल होती हैं; आपके ब्राउज़र के अनुसार रेंडर थोड़ा अलग हो सकता है।
यह कैसे काम करता है
स्क्रॉलबार को स्टाइल करने के लिए कोई एक मानक CSS प्रॉपर्टी नहीं है: Chromium पर आधारित ब्राउज़र (Chrome, Edge, Safari) ::-webkit-scrollbar प्सूडो-एलिमेंट इस्तेमाल करते हैं, जबकि Firefox scrollbar-width और scrollbar-color प्रॉपर्टी इस्तेमाल करता है। यह टूल दोनों एक साथ जनरेट करता है, एक क्लास तक सीमित CSS ब्लॉक में, ताकि नतीजा पूरे पेज पर नहीं बल्कि सिर्फ़ उसी कंटेनर पर लागू हो जिसे आप चुनते हैं।
इस कोड को अपने कंटेनर पर कैसे लागू करूँ?
जनरेट किया गया CSS कॉपी करें, byteryo-custom-scrollbar क्लास का नाम अपनी नामकरण परिपाटी के अनुसार बदलें, फिर यह क्लास उस HTML एलिमेंट में जोड़ें जिसका स्क्रॉलबार आप कस्टमाइज़ करना चाहते हैं (उदाहरण के लिए overflow: auto या overflow: scroll वाला कोई div)।
क्या सभी ब्राउज़र में रेंडर एक जैसा होगा?
नहीं: Firefox केवल चौड़ाई (पतली या ऑटो) और scrollbar-color के ज़रिए रंग स्वीकार करता है, गोलाई या अलग से होवर रंग नहीं, जबकि Chromium आधारित ब्राउज़र ज़्यादा बारीक नियंत्रण देते हैं। जनरेट किया गया कोड हर इंजन पर संभव सबसे अच्छा रेंडर देता है, लेकिन ब्राउज़रों के बीच हल्का दृश्य अंतर सामान्य है।
CSS कोड पूरी तरह आपके ब्राउज़र में बनता है: जनरेशन के दौरान कोई डेटा किसी सर्वर को नहीं भेजा जाता।