पब्लिश किया गया: 4 सितंबर, 2026
"सिंगल-ऐक्सिस स्क्रोल कंटेनर" सुविधा, सीएसएस की overflow प्रॉपर्टी को बढ़ाती है. इससे, स्क्रोल किए जा सकने वाली वैल्यू (auto, scroll, hidden) को clip के साथ जोड़ा जा सकता है. उदाहरण के लिए, overflow: scroll clip. इससे, सिर्फ़ एक ऐक्सिस के लिए स्क्रोल कंटेनर बनते हैं.
इस बदलाव से, ज़्यादातर लोगों की मांग वाली सुविधाएं मिलती हैं. जैसे, हर ऐक्सिस के लिए स्टिकी पोज़िशनिंग. हालांकि, इससे स्क्रोल पर निर्भर रहने वाली अन्य सुविधाओं पर भी साइड इफ़ेक्ट पड़ते हैं. साथ काम करने से जुड़ी संभावित समस्याओं की वजह से, हम डेवलपर से अनुरोध कर रहे हैं कि वे इस सुविधा को स्टेबल चैनलों पर रोल आउट करने से पहले, अपनी वेबसाइटों की जांच करें और हमें सुझाव/राय या शिकायत भेजें.
यह सुविधा, बीटा, डेव, और कैनरी रिलीज़ चैनलों पर Chrome 153 में डेवलपर के लिए टेस्टिंग के तौर पर उपलब्ध है. आपको कोई फ़्लैग चालू करने की ज़रूरत नहीं है.
एक ऐक्सिस पर ओवरफ़्लो सेट करने से जुड़ी समस्या
इस सुविधा के बिना, सीएसएस की मदद से सिंगल-ऐक्सिस स्क्रोल कंटेनर बनाना मुमकिन नहीं था. अगर एक ऐक्सिस को स्क्रोल करने के लिए कॉन्फ़िगर किया जाता है, जबकि दूसरे ऐक्सिस को दिखाने की कोशिश की जाती है. उदाहरण के लिए, overflow-x: scroll सेट करना और overflow-y: visible छोड़ना, तो ब्राउज़र का स्टाइल इंजन, दिखने वाले ऐक्सिस को अपने-आप auto (या scroll) पर सेट कर देता है. इससे, दो डाइमेंशन वाला स्क्रोलर बन जाता है. भले ही, आपने ऐसा न किया हो.
यह समस्या तब साफ़ तौर पर दिखती है, जब स्टिकी टॉप रो और स्टिकी फ़र्स्ट कॉलम वाली टेबल बनाने की कोशिश की जाती है. यहां दिए गए उदाहरण में, हमारा मकसद यह है कि पहला कॉलम, .table-wrapper से चिपका रहे. यह कॉलम, हॉरिज़ॉन्टली स्क्रोल करता है. वहीं, टॉप रो, दस्तावेज़ के स्क्रोलर से चिपकी रहे.
<div class="table-wrapper" style="overflow-x: auto;">
<table>
…
</table>
</div>
/* Scroll horizontally */
.table-wrapper {
overflow-x: auto;
}
/* Sticky top row */
.table-wrapper thead {
position: sticky;
top: 0;
}
/* Sticky first column */
.table-wrapper td:first-child {
position: sticky;
left: 0;
}
अगर आप इसे आज़माते हैं, तो आपको पता चलेगा कि यह काम नहीं करता. ऐसा पहले बताई गई ओवरफ़्लो की समस्या की वजह से होता है. .table-wrapper असल में, दो डाइमेंशन वाला स्क्रोलर बन जाता है. इसलिए, जब position: sticky, हर ऐक्सिस के लिए सबसे नज़दीकी पैरंट स्क्रोलर को ढूंढता है, तो दोनों मामलों में नतीजा .table-wrapper एलिमेंट होता है.
लाइव डेमो
डेमो रिकॉर्डिंग
सिंगल-ऐक्सिस स्क्रोल कंटेनर, समस्या को ठीक करते हैं
सिंगल-ऐक्सिस स्क्रोल कंटेनर की मदद से, clip का इस्तेमाल करके, दूसरे ऐक्सिस को स्क्रोलर बनने से साफ़ तौर पर रोका जा सकता है. इस तरह, position: sticky, दो अलग-अलग स्क्रोल कंटेनर को अलग-अलग ट्रैक कर सकता है.
टेबल के उदाहरण में मौजूद समस्या को ठीक करने के लिए, हॉरिज़ॉन्टल स्क्रोल को overflow-y: clip के साथ जोड़ें.
.table-wrapper {
overflow-x: auto;
overflow-y: clip;
}
या, overflow शॉर्टहैंड का इस्तेमाल करें:
.table-wrapper {
overflow: auto clip;
}
ऐसा करने पर, .table-wrapper सिर्फ़ x-ऐक्सिस के लिए स्क्रोल कंटेनर के तौर पर काम करता है. स्टिकी टॉप रो अब इसे बाईपास कर देगी और y-ऐक्सिस पर दस्तावेज़ के स्क्रोलर से सही तरीके से चिपकी रहेगी. वहीं, पहला कॉलम, .table-wrapper से हॉरिज़ॉन्टली चिपका रहेगा.
अगर इस पोस्ट को ऐसे ब्राउज़र में देखा जा रहा है जो इस सुविधा के साथ काम करता है, तो यहां दिए गए डेमो में इसे ऐक्शन में देखा जा सकता है:
लाइव डेमो
डेमो रिकॉर्डिंग
ऐसे व्यवहार जिन पर असर पड़ा है
सिंगल-ऐक्सिस स्क्रोल कंटेनर की वजह से, स्क्रोलिंग कॉन्टेक्स्ट के आकलन और उन्हें बनाने के तरीके में बदलाव होता है. इसलिए, आपको स्क्रोल कंटेनर पर निर्भर रहने वाली अन्य सुविधाओं में बदलाव दिख सकते हैं. जैसे:
position: sticky: जैसा कि दिखाया गया है, एलिमेंट अब सिंगल-ऐक्सिस स्क्रोल कंटेनर में सही तरीके से चिपके रहेंगे. इससे, एक ऐक्सिस परoverflow: clipसे सीमित एलिमेंट के व्यवहार बेहतर होंगे.overscroll-behavior: अब कोई एलिमेंट, सिर्फ़ एक ऐक्सिस पर स्क्रोल कंटेनर हो सकता है. इसलिए, हो सकता है किoverscroll-behavior, क्लिप किए गए ऐक्सिस पर ट्रिगर न हो. इससे, पुल-टू-रीफ़्रेश या बाउंस इफ़ेक्ट पर असर पड़ सकता है. व्यवहार में यह बदलाव, Firefox और Safari के जैसा है.- प्रोग्राम के ज़रिए स्क्रोल करना: सिंगल-ऐक्सिस स्क्रोल कंटेनर पर स्क्रोल एपीआई (जैसे,
Element.scrollTo()) को कॉल करने पर, अब प्रोग्राम के ज़रिए स्क्रोल करने की पाबंदियां लागू होती हैं. एलिमेंट, क्लिप के तौर पर तय किए गए ऐक्सिस के साथ, प्रोग्राम के ज़रिए स्क्रोल करने से मना कर देगा. - ग्रिड और फ़्लेक्स में सेल का कम से कम साइज़: ग्रिड और फ़्लेक्स लेआउट में स्क्रोल कंटेनर के लिए, डिफ़ॉल्ट कम से कम साइज़ (
min-width: auto) को आम तौर पर अनदेखा किया जाता है, ताकि सेल, उपलब्ध जगह के हिसाब से खुद को अडजस्ट कर सकें. जब एक ही ऐक्सिस परoverflow: clipसेट किया जाता है, तो डिफ़ॉल्ट कम से कम साइज़ का असर दिखने लगेगा. इससे, फ़्लेक्स या ग्रिड कंटेनर बड़ा हो सकता है.
सुविधा का पता लगाना
सिंगल-ऐक्सिस स्क्रोल कंटेनर के लिए, क्वेरी करने के लिए नियम@supports named-feature() का इस्तेमाल करें. इसके लिए, single-axis-scroll-container कीवर्ड का इस्तेमाल करें.
@supports named-feature(single-axis-scroll-container) {
/* Feature is supported */
}
CSSWG की समस्या #13677 में बताए गए तरीके के मुताबिक, इस सुविधा का पता लगाने के लिए, named-feature(single-axis-scroll-container) का इस्तेमाल करने का सुझाव दिया जाता है. ऐसा इसलिए, क्योंकि सिर्फ़ @supports (overflow: scroll clip) का इस्तेमाल करके जांच करने पर, सिर्फ़ पार्स की जांच होती है. इससे यह पता नहीं चलता कि ब्राउज़र, सिंगल-ऐक्सिस स्क्रोलिंग के बदले हुए व्यवहार को सही तरीके से हैंडल करता है या नहीं.
JavaScript में, इस जांच को करने के लिए CSS.supports("named-feature(single-axis-scroll-container)") का इस्तेमाल करें.
आपकी राय मायने रखती है
साथ काम करने से जुड़ी संभावित समस्याओं का आकलन करने के लिए, 190 वेबसाइटों पर टेस्टिंग की गई है. इस विश्लेषण के आधार पर, ऐसा नहीं लगता कि इन बदलावों से कोई बड़ी समस्या आएगी.
हालांकि, सिंगल-ऐक्सिस स्क्रोल कंटेनर की वजह से, स्क्रोलिंग कॉन्टेक्स्ट के आकलन के तरीके में बुनियादी तौर पर बदलाव होता है. इसलिए, ज़्यादा वेबसाइटों पर टेस्टिंग की जा रही है. हम आपसे अनुरोध करते हैं कि इस सुविधा को स्टेबल चैनलों पर रोल आउट करने से पहले, वेबसाइटों और वेब ऐप्लिकेशन की जांच करें, ताकि किसी भी समस्या का पता लगाया जा सके.
अगर आपको कोई समस्या आ रही है या स्क्रोलिंग का कोई अनचाहा व्यवहार दिख रहा है, तो कृपया Chromium में गड़बड़ी की शिकायत करें.