स्क्रोलबार स्टाइल

स्क्रोलबार को स्टाइल देने के लिए scrollbar-width और scrollbar-color प्रॉपर्टी का इस्तेमाल करें.

परिचय

Chrome के वर्शन 2 में, स्क्रोलबार को ::-webkit-scrollbar-* स्यूडो-एलिमेंट की मदद से स्टाइल किया जा सकता है. यह तरीका Chrome और Safari पर ठीक से काम करता है. हालांकि, CSS वर्किंग ग्रुप ने इसे कभी भी स्टैंडर्ड के मुताबिक नहीं बनाया था.

scrollbar-width और scrollbar-color प्रॉपर्टी, सीएसएस स्क्रोलबार स्टाइलिंग मॉड्यूल लेवल 1 के स्पेसिफ़िकेशन का हिस्सा हैं. ये प्रॉपर्टी, Chrome 121 में काम करती हैं.

ब्राउज़र सहायता

  • Chrome: 121. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 121. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 64. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: समर्थित नहीं. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

स्क्रोलबार 101

स्क्रोलबार की बनावट

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

हालांकि, स्क्रोलबार में अंगूठे और ट्रैक के अलावा भी कई हिस्से हो सकते हैं. उदाहरण के लिए, स्क्रोलबार में स्क्रोल ऑफ़सेट को बढ़ाने या कम करने के लिए एक या उससे ज़्यादा बटन हो सकते हैं. स्क्रोलबार बनाने वाले हिस्से, डिवाइस के ऑपरेटिंग सिस्टम पर निर्भर करते हैं.

स्क्रोलबार बनाने के अलग-अलग हिस्सों की इमेज.
स्क्रोलबार के अलग-अलग हिस्सों की इमेज. बाईं ओर मौजूद इलस्ट्रेशन में एक सामान्य स्क्रोलबार है, जिसमें सिर्फ़ एक ट्रैक और अंगूठा है. दाईं ओर मौजूद बटन में भी बटन होते हैं.

क्लासिक और ओवरले स्क्रोलबार

स्क्रोलबार को स्टाइल करने का तरीका जानने से पहले, दो तरह के स्क्रोलबार के बीच के फ़र्क़ को समझना ज़रूरी है.

ओवरले स्क्रोलबार

ओवरले स्क्रोलबार फ़्लोटिंग स्क्रोलबार होते हैं. इन्हें नीचे मौजूद कॉन्टेंट के ऊपर रेंडर किया जाता है. ये डिफ़ॉल्ट रूप से नहीं दिखते, बल्कि सिर्फ़ तब दिखते हैं, जब स्क्रोल किया जा रहा हो. कॉन्टेंट को नीचे की तरफ़ दिखाने के लिए, अक्सर ये आधी-पारदर्शी होती हैं. हालांकि, इसका फ़ैसला ऑपरेटिंग सिस्टम पर निर्भर करता है. इनके साथ इंटरैक्ट करते समय, इनका साइज़ भी अलग-अलग हो सकता है.

ओवरले स्क्रोलबार के साथ ब्राउज़र की इमेज.
ओवरले स्क्रोलबार के साथ ब्राउज़र की इमेज. स्क्रोलबार, कॉन्टेंट को ओवरले कर लेता है; अंगूठा पूरी तरह पारदर्शी है.

क्लासिक स्क्रोलबार

क्लासिक स्क्रोलबार, स्क्रोलबार होते हैं. इन्हें खास तौर पर बने स्क्रोलबार गटर में रखा जाता है. स्क्रोलबार गटर, बॉर्डर के किनारे और बाहरी पैडिंग (जगह) के बीच के स्पेस को कहते हैं. आम तौर पर, ये स्क्रोलबार ओपेक (पारदर्शी नहीं) होते हैं और आस-पास के कॉन्टेंट से कुछ जगह लेते हैं.

क्लासिक स्क्रोलबार के साथ ब्राउज़र की इमेज.
क्लासिक स्क्रोलबार के साथ ब्राउज़र का इलस्ट्रेशन. स्क्रोलबार, कॉन्टेंट के बगल में उसके लिए बने खास हिस्से में होता है; ओवरले स्क्रोलबार का इस्तेमाल करने पर, उपलब्ध चौड़ाई की तुलना में कॉन्टेंट की उपलब्ध चौड़ाई को कम किया जाता है.

scrollbar-color और scrollbar-width प्रॉपर्टी

scrollbar-color के साथ स्क्रोलबार को रंग देना

scrollbar-color प्रॉपर्टी की मदद से, स्क्रोलबार की कलर स्कीम बदली जा सकती है. प्रॉपर्टी में <color> की दो वैल्यू स्वीकार की जाती हैं. पहली <color> वैल्यू से अंगूठे का रंग तय होता है. साथ ही, दूसरे मान से ट्रैक के लिए रंग का पता चलता है.

.scroller {
  scrollbar-color: hotpink blue;
}

ओवरले स्क्रोलबार का इस्तेमाल करते समय, ट्रैक के रंग का डिफ़ॉल्ट रूप से कोई असर नहीं पड़ता. हालांकि, स्क्रोलबार पर कर्सर घुमाने पर ट्रैक दिखेगा.

डेमोग्राफ़िक जानकारी: स्क्रोलबार को स्टाइल करना: scrollbar-color

ऑपरेटिंग सिस्टम से मिले डिफ़ॉल्ट रेंडरिंग का इस्तेमाल करने के लिए, auto को इसकी वैल्यू के तौर पर इस्तेमाल करें.

स्क्रोलबार के साइज़ को scrollbar-width से बदलना

scrollbar-width प्रॉपर्टी की मदद से, छोटा स्क्रोलबार चुना जा सकता है या स्क्रोलबार को पूरी तरह छिपाया जा सकता है. इससे स्क्रोलबार पर कोई असर नहीं पड़ता.

auto, thin, और none ही वैल्यू स्वीकार की जाती हैं.

  • auto: प्लैटफ़ॉर्म पर स्क्रोलबार के लिए डिफ़ॉल्ट तौर पर सेट की गई चौड़ाई.
  • thin: यह प्लैटफ़ॉर्म से मिलने वाला स्क्रोलबार का पतला वैरिएंट या डिफ़ॉल्ट प्लैटफ़ॉर्म स्क्रोलबार से पतला ऐसा कस्टम स्क्रोलबार होता है जो डिफ़ॉल्ट रूप से उपलब्ध होता है.
  • none: स्क्रोलबार को असरदार तरीके से छिपाता है. हालांकि, एलिमेंट को अब भी स्क्रोल किया जा सकता है.

scrollbar-width की वैल्यू के तौर पर, 16px जैसे <length> का इस्तेमाल नहीं किया जा सकता.

.scroller {
  scrollbar-width: thin;
}

ओवरले स्क्रोलबार का इस्तेमाल करते समय, अंगूठे को सिर्फ़ तब खींचा जाता है, जब स्क्रोल किए जा सकने वाले हिस्से को स्क्रोल किया जा रहा हो.

डेमोग्राफ़िक जानकारी: स्क्रोलबार को स्टाइल करना: scrollbar-width

ब्राउज़र के पुराने वर्शन के साथ काम करता है

ब्राउज़र के जिन वर्शन के साथ scrollbar-color और scrollbar-width काम नहीं करते उन्हें उपलब्ध कराने के लिए, scrollbar-* और ::-webkit-scrollbar-*, दोनों प्रॉपर्टी का इस्तेमाल किया जा सकता है.

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}
डेमोग्राफ़िक जानकारी: ::-webkit-scrollbar-* पर फ़ॉलबैक के साथ, scrollbar-* का इस्तेमाल करके स्क्रोलबार को स्टाइल किया जा रहा है

ध्यान दें कि जब ::-webkit-scrollbar के width या height को सेट किया जाता है, तो ओवरले स्क्रोलबार हमेशा दिखता है. यह स्क्रोलबार को क्लासिक स्क्रोलबार में बदल देता है.

भ्रम की स्थिति बनाए रखने के लिए, स्क्रोलर पर कर्सर घुमाते समय ही कलर बदलने का विकल्प चुना जा सकता है.

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}
डेमोग्राफ़िक जानकारी: ::-webkit-scrollbar-* पर फ़ॉलबैक के साथ, scrollbar-* का इस्तेमाल करके स्क्रोलबार को शैली देना, सिर्फ़ कर्सर घुमाने पर ::-webkit-scrollbar-* रंग लागू करना