মডেল ডায়ালগের নিচে থাকা পৃষ্ঠা স্ক্রল করা আটকানো

showModal() ব্যবহার করে যখন কোনও <dialog> এলিমেন্টকে মোডাল হিসেবে খোলা হয়, তখন ব্রাউজার এটিকে সবচেয়ে উপরের লেয়ারে নিয়ে যায় এবং ডকুমেন্টের বাকি অংশকে নিষ্ক্রিয় হিসেবে চিহ্নিত করে। এটি অন্তর্নিহিত পৃষ্ঠায় পয়েন্টার ক্লিক ও কীবোর্ড ফোকাস ব্লক করলেও, স্ক্রল করা আটকায় না:

1. পয়েন্টার বা টাচ জেসচার ::backdrop-এর উপরে থাকাকালীন স্ক্রল করলে, নিচের পৃষ্ঠা স্ক্রল হয়।
2. ডায়ালগ তার স্ক্রল সীমানায় পৌঁছালে—অথবা ডায়ালগের কন্টেন্ট ওভারফ্লো না হলে অবিলম্বে <dialog>-এর মধ্যে স্ক্রল করলে তা অন্তর্নিহিত পৃষ্ঠায় চেইন করে।

CSS ওভারস্ক্রল বিহেভিয়ার স্পেসিফিকেশন অনুযায়ী, overscroll-behavior সব স্ক্রল কন্টেনার এলিমেন্টের ক্ষেত্রে প্রযোজ্য হয়, যার মধ্যে স্ক্রল করা যায় না এমন স্ক্রল কন্টেনারও (overflow: hidden বা overflow: auto সহ এলিমেন্ট যার কন্টেন্ট বর্তমানে ওভারফ্লো করে না) অন্তর্ভুক্ত। <dialog>-এ overscroll-behavior: contain-এর সাথে overflow: hidden এবং dialog::backdrop-এ overscroll-behavior: contain-কে একত্রিত করে, আপনি পিওর CSS ব্যবহার করে অন্তর্নিহিত পৃষ্ঠা স্ক্রল করা থেকে আটকাতে পারেন।

প্রয়োগ

১. <dialog>-এ স্ক্রল চেইনিং আছে

ইউজার-এজেন্ট স্টাইলশিট <dialog>-এ overflow: auto সেট করে, যা ডিফল্ট হিসেবে এটিকে একটি স্ক্রল কন্টেনার করে তোলে। dialog:modal (বা dialog)-এ overscroll-behavior: contain (বা none) প্রয়োগ করুন।

২. ::backdrop-কে স্ক্রল কন্টেনারে পরিণত করুন এবং এর স্ক্রল কন্টেন করুন

ডিফল্ট হিসেবে, dialog::backdrop-এ overflow: visible আছে, যার অর্থ হল এটি স্ক্রল কন্টেনার নয় এবং overscroll-behavior উপেক্ষা করে। আপনাকে অবশ্যই dialog::backdrop-এ overflow: hidden সেট করতে হবে যাতে এটি একটি স্ক্রল করা যায় না এমন স্ক্রল কন্টেনার হয় এবং এটিকে overscroll-behavior: contain-এর সাথে পেয়ার করতে হবে যাতে ব্যাকড্রপের উপর করা স্ক্রল জেসচারগুলি ট্র্যাপ করা হয় এবং নিচে থাকা ডকুমেন্টে পৌঁছাতে না পারে।

কোডের উদাহরণ

dialog:modal {
  /* MANDATORY: Prevent scroll gestures inside the modal (even when its content
     does not overflow) from chaining to the underlying page. */
  overscroll-behavior: contain;
}

dialog::backdrop {
  /* MANDATORY: ::backdrop defaults to overflow: visible (not a scroll container).
     Set overflow: hidden so it becomes a non-scrollable scroll container that
     honors overscroll-behavior. */
  overflow: hidden;
  overscroll-behavior: contain;
}

পেশাদার পদ্ধতি ও সীমাবদ্ধতা

• বাধ্যতামূলক: <dialog> এলিমেন্টে (dialog:modal সিলেক্টর ব্যবহার করে) এবং dialog::backdrop-এ overscroll-behavior: contain সেট করুন। এই ঘোষণা ছাড়া, ব্যাকড্রপের উপরে বা ডায়ালগের ভিতরে স্ক্রল জেসচার এখনও পৃষ্ঠার সাথে চেইন করা হবে।
• বাধ্যতামূলক: dialog::backdrop-এ overflow: hidden (বা overflow: auto) সেট করুন যাতে এটি একটি স্ক্রল কন্টেনার হয়ে যায়। এই ঘোষণা ছাড়া ::backdrop ডিফল্ট হিসেবে overflow: visible-এ সেট হয়ে যাবে এবং overscroll-behavior-এর কোনও প্রভাব থাকবে না।
• dialog::backdrop বা dialog-এ overflow: clip বা overflow: visible ব্যবহার করবেন না। কোনও মানই স্ক্রল কন্টেনার তৈরি করে না, তাই overscroll-behavior প্রযোজ্য হবে না।
• কোনও ডায়ালগ খোলার সময় ব্যাকগ্রাউন্ড স্ক্রলিং লক করতে <html> বা <body>-এ overflow: hidden বা position: fixed প্রয়োগ করবেন না। মিউটেটিং রুট ওভারফ্লো পৃষ্ঠার স্ক্রলবার সরিয়ে দেয় (যার ফলে অনুভূমিক লেআউট শিফ্ট হয়), পৃষ্ঠার স্ক্রল পজিশন রিসেট করতে বা জাম্প করতে পারে এবং অন্তর্নিহিত পৃষ্ঠায় position: sticky এলিমেন্ট ভেঙে দিতে পারে।

ফলব্যাক স্ট্র্যাটেজি

ওভারফ্লো কন্টেন্ট আছে এমন স্ক্রল কন্টেনারের জন্য সব প্রধান ব্রাউজার জুড়ে overscroll-behavior CSS প্রপার্টি কাজ করলেও, স্ক্রল করা যায় না এমন স্ক্রল কন্টেনারে overscroll-behavior মেনে চলা হল একটি নতুন স্পেসিফিকেশন যা ফিচার শনাক্ত করতে পারে না।

@supports (overscroll-behavior: contain) বা CSS.supports('overscroll-behavior', 'contain')-এর মাধ্যমে স্ক্রল করা যায় না এমন কন্টেনার সাপোর্ট ফিচার শনাক্ত করার চেষ্টা করবেন না। সব আধুনিক ব্রাউজার overscroll-behavior: contain প্রপার্টি সিনট্যাক্সকে সাপোর্ট করে এবং true রিটার্ন করে, এমনকি কন্টেন্ট ওভারফ্লো হলে তবেই তারা এটি এনফোর্স করে।

পরিবর্তে, স্ক্রল করা যায় না এমন স্ক্রল কন্টেনারে স্ক্রল কন্টেনমেন্টকে প্রোগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে বিবেচনা করুন:

• যেসব ব্রাউজার স্ক্রল করা যায় না এমন স্ক্রল কন্টেনারে overscroll-behavior সাপোর্ট করে, সেগুলিতে dialog::backdrop-এর উপরে এবং <dialog>-এর ভিতরে (এটির কন্টেন্ট ওভারফ্লো করুক বা না করুক) ব্যাকগ্রাউন্ড পৃষ্ঠা স্ক্রল করা সম্পূর্ণভাবে আটকানো হয়।
• যেসব ব্রাউজারে এখনও স্ক্রল করা যায় না এমন স্ক্রল কন্টেনারে overscroll-behavior কাজ করে না, সেখানে dialog-এ overscroll-behavior: contain এখনও স্ক্রল চেইনিং আটকায়, যখনই ডায়ালগের নিজস্ব কন্টেন্ট উপচে পড়ে এবং স্ক্রল করা যায়। ইতিমধ্যে, showModal() এখনও কীবোর্ড ফোকাস ট্র্যাপ করে এবং ব্যাকগ্রাউন্ড ডকুমেন্ট inert হিসেবে চিহ্নিত করে।
• <html> বা <body>-এ overflow: hidden বা position: fixed প্রয়োগ করে এমন পুরনো ওয়ার্কঅ্যারাউন্ডের পরিবর্তে প্রোগ্রেসিভ এনহ্যান্সমেন্টের উপর নির্ভর করা সাজেস্ট করা হয়, কারণ এটি রুট স্ক্রলবার সরিয়ে দেয় না, অনুভূমিক লেআউট শিফটের কারণ হয় না, পৃষ্ঠার স্ক্রল পজিশন জাম্প করে না বা অন্তর্নিহিত পৃষ্ঠায় position: sticky এলিমেন্ট ভেঙে দেয় না।