CSS स्क्रॉलबार जनरेटर - कस्टम स्क्रॉलबार स्टाइल ऑनलाइन
विजुअल कंट्रोल और लाइव प्रीव्यू के साथ कस्टम CSS स्क्रॉलबार स्टाइल डिज़ाइन करें। WebKit और स्टैंडर्ड स्क्रॉलबार CSS कोड तुरंत जनरेट करें — 100% क्लाइंट-साइड, सर्वर पर कोई डेटा नहीं भेजा जाता।
अक्सर पूछे जाने वाले प्रश्न
CSS स्क्रॉलबार जेनरेटर क्या है?
CSS स्क्रॉलबार जेनरेटर एक विज़ुअल टूल है जो CSS का उपयोग करके आपकी वेबसाइट के लिए कस्टम स्क्रॉलबार स्टाइल बनाने में मदद करता है। जटिल CSS pseudo-element नियमों को मैन्युअल रूप से लिखने के बजाय, आप विज़ुअल कंट्रोल से रंग, आयाम और बॉर्डर प्रॉपर्टीज़ को एडजस्ट कर सकते हैं और तुरंत प्रोडक्शन-रेडी CSS कोड प्राप्त कर सकते हैं। यह स्टैंडर्ड scrollbar-color/scrollbar-width प्रॉपर्टीज़ और WebKit-विशिष्ट pseudo-elements जैसे ::-webkit-scrollbar दोनों को सपोर्ट करता है।
इस CSS स्क्रॉलबार जेनरेटर का उपयोग कैसे करें?
1. अपना आउटपुट मोड चुनें: केवल WebKit, केवल स्टैंडर्ड, या दोनों (अनुशंसित)। 2. स्लाइडर का उपयोग करके स्क्रॉलबार की चौड़ाई सेट करें। 3. ट्रैक (बैकग्राउंड) और थंब (हैंडल) के लिए रंग चुनें। 4. वैकल्पिक रूप से बॉर्डर रेडियस, बॉर्डर, और होवर/एक्टिव स्टेट रंग एडजस्ट करें। 5. प्रीव्यू पैनल में लाइव बदलाव देखें। 6. जेनरेट किए गए CSS कोड को कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें।
WebKit और स्टैंडर्ड स्क्रॉलबार CSS में क्या अंतर है?
स्टैंडर्ड प्रॉपर्टीज़ (scrollbar-color, scrollbar-width) आधिकारिक CSS स्पेसिफिकेशन का हिस्सा हैं और सभी आधुनिक ब्राउज़रों (Chrome 121+, Firefox 64+, Safari 26.2+, Edge 121+) में काम करती हैं। ये सरल रंग और चौड़ाई नियंत्रण प्रदान करती हैं। WebKit pseudo-elements (::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb) गैर-मानक हैं लेकिन बॉर्डर रेडियस, बॉर्डर, होवर स्टेट्स और व्यक्तिगत भागों की स्टाइलिंग पर अधिक विस्तृत नियंत्रण प्रदान करते हैं। महत्वपूर्ण: यदि दोनों सेट हैं, तो स्टैंडर्ड प्रॉपर्टीज़ WebKit स्टाइलिंग को ओवरराइड करती हैं।
क्या स्टैंडर्ड स्क्रॉलबार CSS प्रॉपर्टीज़ सभी ब्राउज़रों में सपोर्टेड हैं?
हाँ। दिसंबर 2025 तक, scrollbar-color और scrollbar-width ने Baseline Newly Available स्टेटस प्राप्त कर लिया है, जिसका अर्थ है कि वे Chrome, Firefox, Safari और Edge में सपोर्टेड हैं। सबसे विस्तृत कस्टमाइज़ेशन (बॉर्डर रेडियस, बॉर्डर, होवर स्टेट्स) के लिए, आप अभी भी WebKit pseudo-elements को एक एन्हांसमेंट के रूप में शामिल करना चाह सकते हैं।
क्या इस टूल का उपयोग करते समय मेरा डेटा सुरक्षित है?
हाँ। यह टूल पूरी तरह से आपके ब्राउज़र में चलता है। कोई CSS कोड, रंग मान, या कोई अन्य डेटा किसी सर्वर पर नहीं भेजा जाता है। सभी प्रोसेसिंग क्लाइंट-साइड पर होती है, जो पूर्ण गोपनीयता और सुरक्षा सुनिश्चित करती है।
क्या मैं अलग-अलग एलीमेंट्स के लिए अलग-अलग स्क्रॉलबार स्टाइल कर सकता हूँ?
हाँ। जेनरेट किया गया CSS pseudo-elements का उपयोग करता है जिन्हें विशिष्ट एलीमेंट्स तक स्कोप किया जा सकता है। ग्लोबली स्टाइल लागू करने के बजाय, आप सेलेक्टर्स को क्लास नाम के साथ प्रीफिक्स कर सकते हैं (जैसे, .my-container::-webkit-scrollbar) ताकि केवल उस विशिष्ट एलीमेंट के अंदर स्क्रॉलबार को स्टाइल किया जा सके।
स्क्रॉलबार को एक्सेसिबल कैसे बनाएं?
स्क्रॉलबार स्टाइल करते समय, सुनिश्चित करें कि थंब में ट्रैक के विरुद्ध कम से कम 3:1 कलर कंट्रास्ट रेशियो हो (WCAG 2.0 गाइडलाइन)। स्क्रॉलबार को बहुत पतला (8px से कम) बनाने से बचें क्योंकि यह टच इनपुट के लिए उपयोगिता कम करता है। स्क्रॉलबार को कभी न छुपाएं (scrollbar-width: none) जब तक कि आप वैकल्पिक स्क्रॉलिंग इंडिकेटर प्रदान न करें, क्योंकि यह उन उपयोगकर्ताओं की उपयोगिता को नुकसान पहुँचाता है जो दृश्य स्क्रॉलबार पर निर्भर करते हैं।
कोड उदाहरण
// Generate CSS scrollbar styles from configuration
function generateScrollbarCSS(config) {
const {
width = 12,
trackColor = '#f1f1f1',
thumbColor = '#888888',
thumbHoverColor = '#555555',
thumbBorderRadius = 6,
trackBorderRadius = 0
} = config;
// Standard CSS (all modern browsers)
const standardCSS = [
'/* Standard scrollbar properties (Chrome 121+, Firefox 64+, Safari 26.2+) */',
'.custom-scrollbar {',
` scrollbar-width: ${width <= 6 ? 'thin' : 'auto'};`,
` scrollbar-color: ${thumbColor} ${trackColor};`,
'}'
].join('\n');
// WebKit CSS (Chrome, Safari, Edge - enhanced styling)
const webkitCSS = [
'/* WebKit scrollbar styling (Chrome, Safari, Edge) */',
'.custom-scrollbar::-webkit-scrollbar {',
` width: ${width}px;`,
` height: ${width}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-track {',
` background: ${trackColor};`,
` border-radius: ${trackBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb {',
` background: ${thumbColor};`,
` border-radius: ${thumbBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb:hover {',
` background: ${thumbHoverColor};`,
'}'
].join('\n');
return { standardCSS, webkitCSS, combined: `${standardCSS}\n\n${webkitCSS}` };
}
// Usage
const css = generateScrollbarCSS({
width: 10,
trackColor: '#f0f0f0',
thumbColor: '#6366f1',
thumbHoverColor: '#4f46e5',
thumbBorderRadius: 5,
trackBorderRadius: 5
});
console.log(css.combined);