स्क्रोलबार के रंग या मोटाई को पसंद के मुताबिक बनाना

स्टैंडर्ड सीएसएस प्रॉपर्टी scrollbar-color और scrollbar-width का इस्तेमाल करके, स्क्रोलबार के दिखने के तरीके को पसंद के मुताबिक बनाया जा सकता है.

• scrollbar-color: इसमें दो <color> वैल्यू डाली जा सकती हैं. पहला थंब (मूविंग पार्ट) पर लागू होता है और दूसरा ट्रैक (फ़िक्स्ड बैकग्राउंड) पर.
• scrollbar-width: यह auto (डिफ़ॉल्ट), thin (एक पतला वैरिएंट) या none (स्क्रोल करने की सुविधा को बनाए रखते हुए, स्क्रोलबार को पूरी तरह से छिपाता है) को स्वीकार करता है.

scrollbar-color और scrollbar-width लागू करें

ज़रूरी: स्क्रोल किए जा सकने वाले कंटेनर पर scrollbar-color और scrollbar-width का इस्तेमाल करें.

scrollbar-color का इस्तेमाल करते समय, थंब और ट्रैक के रंगों को अलग-अलग रखने के लिए सीएसएस वैरिएबल का इस्तेमाल करें. इससे, कॉन्टेंट को पढ़ने और उसे मैनेज करने में आसानी होती है. खास तौर पर, फ़ॉलबैक का इस्तेमाल करते समय.

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

फ़ॉलबैक रणनीतियां

scrollbar-color के लिए फ़ॉलबैक और ब्राउज़र सहायता

यह सुविधा, परतदार वृद्धि है. इसके लिए, हमेशा फ़ॉलबैक की ज़रूरत नहीं होती.

अगर स्टाइलिंग ज़रूरी है और उपयोगकर्ता का Baseline टारगेट "Baseline Widely Available" या इससे पहले का है, तो आपको फ़ॉलबैक के तौर पर, स्टैंडर्ड के मुताबिक न होने वाले ::-webkit-scrollbar सूडो-एलिमेंट शामिल करने चाहिए.

लेगसी फ़ॉलबैक को @supports not (scrollbar-color: auto) ब्लॉक में रैप करें, ताकि स्टैंडर्ड प्रॉपर्टी और लेगसी WebKit सिलेक्टर के बीच टकराव को रोका जा सके. ऐसा उन ब्राउज़र में करें जो दोनों को नेटिव तौर पर सपोर्ट करते हैं.

अगर रंगों को तय करने के लिए कस्टम प्रॉपर्टी का इस्तेमाल किया जा रहा है, तो ये लेगसी WebKit सिलेक्टर पर अपने-आप लागू हो जाएंगी. आपको उन्हें डुप्लीकेट करने की ज़रूरत नहीं है.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}