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

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

ब्रैमस

शुरुआती जानकारी

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

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. */
}