कैसे करें - कस्टम स्क्रॉलबार
CSS के साथ कस्टम स्क्रॉलबार बनाने का तरीका जानें।
कस्टम स्क्रॉलबार
नोट: कस्टम स्क्रॉलबार फ़ायरफ़ॉक्स या एज, पूर्व संस्करण 79 में समर्थित नहीं हैं।
कस्टम स्क्रॉलबार कैसे बनाएं
क्रोम, एज, सफारी और ओपेरा गैर-मानक ::-webkit-scrollbar
छद्म तत्व का समर्थन करते हैं, जो हमें ब्राउज़र के स्क्रॉलबार के रूप को संशोधित करने की अनुमति देता है।
निम्न उदाहरण एक पतला (10px चौड़ा) स्क्रॉलबार बनाता है, जिसमें एक ग्रे ट्रैक/बार रंग और एक गहरा-ग्रे (#888) हैंडल होता है:
उदाहरण
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
यह उदाहरण बॉक्स छाया के साथ एक स्क्रॉलबार बनाता है:
उदाहरण
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
स्क्रॉलबार चयनकर्ता
वेबकिट ब्राउज़र के लिए, आप ब्राउज़र के स्क्रॉलबार को अनुकूलित करने के लिए निम्नलिखित छद्म तत्वों का उपयोग कर सकते हैं:
::-webkit-scrollbar
स्क्रॉलबार।::-webkit-scrollbar-button
स्क्रॉलबार पर बटन (ऊपर और नीचे की ओर इशारा करते हुए तीर)।::-webkit-scrollbar-thumb
ड्रैग करने योग्य स्क्रॉलिंग हैंडल।::-webkit-scrollbar-track
स्क्रॉलबार का ट्रैक (प्रगति पट्टी)।::-webkit-scrollbar-track-piece
ट्रैक (प्रगति पट्टी) हैंडल द्वारा कवर नहीं किया गया।::-webkit-scrollbar-corner
स्क्रॉलबार का निचला कोना, जहां दोनों क्षैतिज और लंबवत स्क्रॉलबार मिलते हैं।::-webkit-resizer
ड्रैग करने योग्य आकार बदलने वाला हैंडल जो कुछ तत्वों के निचले कोने पर दिखाई देता है।