প্রকাশিত: ৪ সেপ্টেম্বর, ২০২৬
‘single-axis scroll containers’ ফিচারটি CSS overflow প্রপার্টিকে প্রসারিত করে, যার ফলে এটি clip সাথে স্ক্রলযোগ্য ভ্যালু ( auto , scroll , hidden ) একত্রিত করে ব্যবহার করতে পারে (উদাহরণস্বরূপ, overflow: scroll clip ), এবং এর ফলস্বরূপ শুধুমাত্র একটি অক্ষের জন্য স্ক্রল কন্টেইনার তৈরি হয়।
যদিও এই পরিবর্তনটি প্রতি-অক্ষ স্টিকি পজিশনিং-এর মতো বহুল-অনুরোধিত ফিচারগুলো চালু করছে, এটি স্ক্রল-নির্ভর অন্যান্য ফিচারগুলোতেও অতিরিক্ত পার্শ্বপ্রতিক্রিয়া সৃষ্টি করছে। এই সম্ভাব্য সামঞ্জস্যতার ঝুঁকির কারণে, আমরা ডেভেলপারদের অনুরোধ করছি যেন এই ফিচারটি স্টেবল চ্যানেলে চালু করার আগে তারা তাদের ওয়েবসাইটগুলো পরীক্ষা করে মতামত প্রদান করেন।
এই ফিচারটি ক্রোম ১৫৩-এর বিটা, ডেভ এবং ক্যানারি রিলিজ চ্যানেলে ডেভেলপার টেস্টিংয়ের জন্য উপলব্ধ। এর জন্য কোনো ফ্ল্যাগ চালু করার প্রয়োজন নেই।
একটি অক্ষে ওভারফ্লো সেট করার অদ্ভুত ব্যাপারটি
এই বৈশিষ্ট্যটি ছাড়া CSS ব্যবহার করে একটি সত্যিকারের একক-অক্ষের স্ক্রল কন্টেইনার তৈরি করা অসম্ভব ছিল। যদি আপনি একটি অক্ষকে স্ক্রল করার জন্য কনফিগার করেন এবং অন্য অক্ষটিকে দৃশ্যমান রাখার চেষ্টা করেন (উদাহরণস্বরূপ, 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আর ট্রিগার নাও হতে পারে, যা কাস্টম পুল-টু-রিফ্রেশ বা বাউন্স ইফেক্টকে প্রভাবিত করতে পারে। আচরণের এই পরিবর্তনটি ফায়ারফক্স এবং সাফারির সাথে সামঞ্জস্যপূর্ণ। - প্রোগ্রাম্যাটিক স্ক্রলিং : একটি একক-অক্ষের স্ক্রল কন্টেইনারে স্ক্রল এপিআই (যেমন
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) ব্যবহার করে পরীক্ষা করাটা কেবল একটি পার্স চেক, যা ব্রাউজার সংশোধিত একক-অক্ষ স্ক্রলিং আচরণগুলো সঠিকভাবে পরিচালনা করছে কি না তা শনাক্ত করতে পারে না।
জাভাস্ক্রিপ্টে, এই যাচাইটি করার জন্য CSS.supports("named-feature(single-axis-scroll-container)") ব্যবহার করুন।
মতামত কাম্য।
সম্ভাব্য সামঞ্জস্যতার ঝুঁকিগুলো মূল্যায়ন করার জন্য ১৯০টি ওয়েবসাইটে পরীক্ষা চালানো হয়েছে। এই বিশ্লেষণের ভিত্তিতে, পরিবর্তনগুলোর ফলে কোনো উল্লেখযোগ্য সমস্যা সৃষ্টি হবে বলে মনে হয় না।
তবে, যেহেতু একক-অক্ষ স্ক্রল কন্টেইনারগুলো স্ক্রলিং কনটেক্সট মূল্যায়নের পদ্ধতিকে মৌলিকভাবে পরিবর্তন করে, তাই আরও ব্যাপকভাবে পরীক্ষা চালানো হচ্ছে। এই ফিচারটি স্টেবল ভার্সনে চালু হওয়ার আগে, যেকোনো এজ কেস শনাক্ত করতে সাহায্য করার জন্য আপনাকে নন-স্টেবল ক্রোম চ্যানেলগুলোতে ওয়েবসাইট এবং ওয়েব অ্যাপ্লিকেশন পরীক্ষা করতে বলা হচ্ছে।
যদি আপনার সিস্টেমে কোনো সমস্যা দেখা দেয়, অথবা স্ক্রোলিং-এর সময় অপ্রত্যাশিত কোনো আচরণ লক্ষ্য করেন, তাহলে অনুগ্রহ করে একটি Chromium বাগ রিপোর্ট করুন ।