a11y.skipToMainContent
1

सीएसएस स्क्रॉलबार स्टाइलर

डिज़ाइन कस्टम स्क्रॉलबार दृष्टि से - चौड़ाई, ट्रैक और अंगूठे के रंग, होवर स्टेट और त्रिज्या - फिर वेब किट और फ़ायरफ़ॉक्स सीएसएस कॉपी करें।.

Track radius (optional)

The ::-webkit-scrollbar pseudo-elements style the scrollbar in Chrome, Edge, and Safari. Firefox does not support them and instead uses thescrollbar-width / scrollbar-color fallback included in the output.

Preview (scroll the box)

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Scrollbar Styler

  1. स्क्रॉलबार की चौड़ाई और ट्रैक, अंगूठे और अंगूठे के रंग सेट करें।.
  2. एक अंगूठे सीमा त्रिज्या चुनें और वैकल्पिक रूप से ट्रैक को गोल करें।.
  3. वेबकिट ब्राउज़र में देखने के लिए लाइव पूर्वावलोकन बॉक्स को स्क्रॉल करें।.
  4. वेबकिट और फायरफॉक्स दोनों नियमों को कॉपी करने के लिए सीएसएस पर क्लिक करें।.

स्क्रॉलबार स्टाइलर क्या है?

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

आउटपुट में क्रोम, एज और सफारी द्वारा उपयोग किए जाने वाले WebKit छद्म-element ब्लॉक (:-webkit-scrollbar और इसके ट्रैक, अंगूठे और अंगूठे वाले हिस्से दोनों शामिल हैं। सब कुछ आपके ब्राउज़र में चलता है।

Advertisement

FAQ

क्यों फ़ायरफ़ॉक्स में तैयार नहीं है?
फ़ायरफ़ॉक्स WebKit का समर्थन नहीं करता है: वेबकिट-स्क्रोलबार छद्म-तत्व। इसके बजाय स्क्रॉलबार-चौड़ाई और स्क्रॉलबार-रंग की गिरावट का उपयोग करता है, जो केवल एक पतली या ऑटो चौड़ाई और एक अंगूठे / ट्रैक रंग जोड़ी की अनुमति देता है - जिनमें से दोनों कॉपी किए गए सीएसएस में शामिल हैं।.
मैं कॉपी किए गए सीएसएस को एक विशिष्ट तत्व में कैसे लागू करूं?
उत्पादन एक .scrollbox वर्ग लक्ष्य। उस श्रेणी को स्क्रॉल करने योग्य तत्व में जोड़ें जिसे आप स्टाइल करना चाहते हैं, या इसे अपने स्टाइलशीट में चिपकाने से पहले अपने चयनकर्ता के साथ .scrollbox को प्रतिस्थापित करें।.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement