कैसे बनाया जाता है: कस्टम स्क्रॉलबार

CSS के उपयोग से कस्टम स्क्रॉलबार कैसे बनाया जाता है सीखें

कस्टम स्क्रॉलबार कैसे बनाया जाता है

Chrome, Edge, Safari और Opera असामान्य ::-webkit-scrollbar प्रतीक, जो हमें ब्राउज़र स्क्रॉलबार की दृश्यमानता को संशोधित करने की अनुमति देता है।

नीचे का उदाहरण 10px चौड़ाई वाला स्क्रॉलबार बनाता है, जिसमें ग्रे ट्रैक/पट्टी रंग और गहरे ग्रे (#888) स्लाइडर है:

/* चौड़ाई */
::-webkit-scrollbar {
  width: 10px;
}
/* ट्रैक */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* स्लाइडर */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* माउस झूलने पर स्लाइडर */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

स्वयं प्रयोग कीजिए

इस उदाहरण में एक शाद्यविहीन स्क्रॉलबार का निर्माण किया गया है:

उदाहरण

/* चौड़ाई */
::-webkit-scrollbar {
  width: 20px;
}
/* ट्रैक */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* स्लाइडर */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

स्वयं प्रयोग कीजिए

स्क्रॉलबार चयनक

webkit ब्राउज़र के लिए, आप निम्नलिखित नाटक प्रतीक का उपयोग करके ब्राउज़र के स्क्रॉलबार को कस्टमाइज कर सकते हैं: