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

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

Bramus

परिचय

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

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

स्क्रोलबार 101

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

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

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

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

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

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

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

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

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

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

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

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

.scroller {
  scrollbar-color: hotpink blue;
}

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

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

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

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

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

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

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

.scroller {
  scrollbar-width: thin;
}

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

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

ब्राउज़र के जिन वर्शन के साथ 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 के 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. */
}