मॉडल डायलॉग के नीचे मौजूद पेज को स्क्रोल होने से रोकना

जब showModal() का इस्तेमाल करके, <dialog> एलिमेंट को मॉडल के तौर पर खोला जाता है, तो ब्राउज़र उसे सबसे ऊपर वाली लेयर पर ले जाता है. साथ ही, दस्तावेज़ के बाकी हिस्से को इनर्ट के तौर पर मार्क करता है. इससे, पेज पर मौजूद पॉइंटर क्लिक और कीबोर्ड फ़ोकस ब्लॉक हो जाता है. हालांकि, स्क्रोल करने की सुविधा नहीं रुकती:

1. जब पॉइंटर या टच जेस्चर ::backdrop पर हो, तब स्क्रोल करने से नीचे मौजूद पेज स्क्रोल होता है.
2. डायलॉग के स्क्रोल की सीमा तक पहुंचने के बाद, <dialog> के अंदर स्क्रोल करने पर, डायलॉग के नीचे मौजूद पेज पर स्क्रोल किया जा सकता है. इसके अलावा, अगर डायलॉग का कॉन्टेंट ओवरफ़्लो नहीं होता है, तो तुरंत स्क्रोल किया जा सकता है.

सीएसएस ओवरस्क्रोल बिहेवियर स्पेसिफ़िकेशन के मुताबिक, overscroll-behavior सभी स्क्रोल कंटेनर एलिमेंट पर लागू होता है. इनमें स्क्रोल न किए जा सकने वाले स्क्रोल कंटेनर भी शामिल हैं. ये ऐसे एलिमेंट होते हैं जिनमें overflow: hidden या overflow: auto होता है और जिनका कॉन्टेंट फ़िलहाल ओवरफ़्लो नहीं होता. <dialog> पर overscroll-behavior: contain को overflow: hidden के साथ और dialog::backdrop पर overscroll-behavior: contain को जोड़कर, सीएसएस का इस्तेमाल करके, पेज को स्क्रोल होने से रोका जा सकता है.

लागू करना

1. <dialog> पर स्क्रोल चेनिंग शामिल करें

उपयोगकर्ता-एजेंट स्टाइलशीट, <dialog> पर overflow: auto सेट करती है. इससे यह डिफ़ॉल्ट रूप से स्क्रोल कंटेनर बन जाता है. dialog:modal (या dialog) के लिए, overscroll-behavior: contain (या none) लागू करें.

2. ::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> एलिमेंट पर ही overscroll-behavior: contain सेट करें. इसके लिए, dialog:modal सिलेक्टर और dialog::backdrop का इस्तेमाल करें. इस एलान के बिना, बैकड्रॉप या डायलॉग के अंदर स्क्रोल जेस्चर अब भी पेज से जुड़े रहेंगे.
• ज़रूरी: 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 सीएसएस प्रॉपर्टी, सभी मुख्य ब्राउज़र पर काम करती है. यह प्रॉपर्टी, स्क्रोल कंटेनर में मौजूद ऐसे कॉन्टेंट के लिए काम करती है जो ओवरफ़्लो हो रहा है. हालांकि, स्क्रोल न किए जा सकने वाले स्क्रोल कंटेनर पर 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 एलिमेंट को नहीं तोड़ता.