पब्लिश होने की तारीख: 4 सितंबर, 2026
"सिंगल-ऐक्सिस स्क्रोल कंटेनर" सुविधा, सीएसएस overflow प्रॉपर्टी को बढ़ाती है, ताकि स्क्रोल की जा सकने वाली वैल्यू (auto, scroll, hidden) के साथ-साथ clip (उदाहरण के लिए, overflow: scroll clip) का इस्तेमाल किया जा सके. इससे सिर्फ़ एक ऐक्सिस के लिए स्क्रोल कंटेनर मिलते हैं.
इस बदलाव से, सबसे ज़्यादा अनुरोध की गई सुविधाएं अनलॉक हो जाती हैं. जैसे, हर ऐक्सिस के हिसाब से स्टिकी पोज़िशनिंग. हालांकि, इससे स्क्रोल पर निर्भर करने वाली अन्य सुविधाओं पर भी साइड इफ़ेक्ट पड़ते हैं. इन संभावित जोखिमों की वजह से, हम डेवलपर से अनुरोध कर रहे हैं कि वे अपनी वेबसाइटों की जांच करें और इस सुविधा को स्टेबल चैनलों पर रोल आउट करने से पहले, हमें सुझाव/राय दें या शिकायत करें.
यह सुविधा, डेवलपर टेस्टिंग के लिए Chrome 154 के बीटा, डेव, और कैनरी रिलीज़ चैनल पर उपलब्ध है. आपको किसी फ़्लैग को चालू करने की ज़रूरत नहीं है.
किसी एक ऐक्सिस पर ओवरफ़्लो सेट करने से जुड़ी समस्या
इस सुविधा के बिना, सीएसएस की मदद से सिंगल-ऐक्सिस स्क्रोल कंटेनर बनाना मुमकिन नहीं था. अगर आपने एक ऐक्सिस को स्क्रोल करने के लिए कॉन्फ़िगर किया है, जबकि दूसरे ऐक्सिस को दिखने के लिए सेट किया है (उदाहरण के लिए, 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को एक ही ऐक्सिस पर सेट किया जाता है, तो डिफ़ॉल्ट तौर पर तय की गई कम से कम साइज़ की वैल्यू लागू होने लगती है. इससे फ़्लेक्स या ग्रिड कंटेनर का साइज़ बढ़ सकता है.
फ़ीचर का पता लगाने की सुविधा
सिंगल-ऐक्सिस स्क्रोल कंटेनर के लिए सहायता का पता लगाने के लिए, single-axis-scroll-container कीवर्ड का इस्तेमाल करके @supports named-feature() नियम को क्वेरी करें.
@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 वेबसाइटों पर टेस्टिंग की गई है. इस विश्लेषण के आधार पर, ऐसा नहीं लगता कि बदलावों की वजह से कोई बड़ी समस्या आई है.
हालांकि, सिंगल-ऐक्सिस स्क्रोल कंटेनर, स्क्रोल करने के कॉन्टेक्स्ट का आकलन करने के तरीके को बुनियादी तौर पर बदल देते हैं. इसलिए, ज़्यादा से ज़्यादा कॉन्टेंट को शामिल किया जा रहा है. आपको वेबसाइटों और वेब ऐप्लिकेशन को Chrome के नॉन-स्टेबल चैनल पर टेस्ट करने के लिए कहा गया है. इससे, इस सुविधा को स्टेबल वर्शन में रोल आउट करने से पहले, किसी भी समस्या का पता लगाने में मदद मिलेगी.
अगर आपको कोई समस्या आ रही है या स्क्रोलिंग में कोई गड़बड़ी हो रही है, तो कृपया Chromium में बग की शिकायत करें.