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

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

Bramus

परिचय

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

scrollbar-width और scrollbar-color प्रॉपर्टी को स्टैंडर्ड बनाया गया है. ये प्रॉपर्टी, CSS Scrollbars Styling Module Level 1 Specification का हिस्सा हैं. ये प्रॉपर्टी, Chrome 121 के बाद के वर्शन पर काम करती हैं.

स्क्रोलबार के बारे में बुनियादी जानकारी

स्क्रोलबार के अलग-अलग हिस्सों के बारे में जानकारी

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

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

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

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

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

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

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

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

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 एट्रिब्यूट की वैल्यू के तौर पर, <length> जैसे कि 16px का इस्तेमाल नहीं किया जा सकता.

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