CSS overscroll-behavior प्रकृति

परिभाषा और उपयोग

overscroll-behavior एट्रिब्यूट इसके लिए उपयोग किया जाता है कि जब उपयोगकर्ता को ओवरस्क्रोल बॉर्डर से बाहर रोल करने की कोशिश करता है, तो एलिमेंट के स्क्रोल लिंक (scroll chaining) या ओवरस्क्रोल फ़ीडबैक (overscroll affordance) को बंद करे।

स्क्रोल लिंक: एक एलिमेंट पर ओवरस्क्रोल करने पर, इससे माता एलिमेंट के स्क्रोल व्यवहार को प्रभावित करना। यह मूलभूत व्यवहार है।

ओवरस्क्रोल फ़ीडबैक: जब उपयोगकर्ता को ओवरस्क्रोल बॉर्डर से बाहर रोल करने की कोशिश करता है, तो उसे दी जाने वाली प्रतिक्रिया। उदाहरण के लिए, मोबाइल डिवाइस पर पृष्ठ के शीर्ष से ओवरस्क्रोल करने के लिए, आमतौर पर दृश्यीय प्रतिक्रिया दिखाई देती है और पृष्ठ को रीफ़्रेश किया जाता है।

overscroll-behavior यह गुण निम्नलिखित गुणों के संक्षिप्त रूप है:

• overscroll-behavior-x
• overscroll-behavior-y

overscroll-behavior गुण के मान को अलग-अलग तरीकों से सेट किया जा सकता है:

यदि overscroll-behavior गुण को दो मान है:

overscroll-behavior: none contain;

• x दिशा: ओवरस्क्रॉल बीचर की कार्यवाही नहीं है
• y दिशा: कोई स्क्रॉलिंग लिंक नहीं है, लेकिन ओवरस्क्रॉल बीचर की अनुमति है

यदि overscroll-behavior गुण को एक मान है:

overscroll-behavior: contain;

• x और y दिशा: कोई स्क्रॉलिंग लिंक नहीं है, लेकिन ओवरस्क्रॉल बीचर की अनुमति है

उदाहरण

उदाहरण 1

स्क्रॉल करने वाले <div> एलिमेंट के स्क्रॉलिंग लिंक को बंद करें:

#yellowDiv {
  overscroll-behavior: contain;
}

स्वयं के लिए प्रयोग करें

उदाहरण 2: दो मान व्याकरण:

इसे overscroll-behavior गुण मान सेट किया गया है auto nonex दिशा के लिए स्क्रॉलिंग लिंक और ओवरस्क्रॉल बीचर की अनुमति है, लेकिन y दिशा में नहीं है:

#pinkDiv {
  overscroll-behavior: auto none;
}

स्वयं के लिए प्रयोग करें

CSS व्याकरण

overscroll-behavior: auto|contain|none|initial|inherit;

गुण मान

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण का पूरी तरह से समर्थन करने वाले पहले ब्राउज़र का संस्करण को प्रस्तुत करते हैं。

* माइक्रोसॉफ्ट एज में, 'none' प्रकृति के मान को 'contain' के रूप में देखा जाता है, यह गलत है।

संबंधित पृष्ठ

संदर्भ：CSS overscroll-behavior-x प्रकृति

संदर्भ：CSS overscroll-behavior-y प्रकृति

संदर्भ：CSS scroll-behavior प्रकृति

संदर्भ：CSS scroll-margin प्रकृति

संदर्भ：CSS scroll-padding गुण

संदर्भ：CSS scroll-snap-align गुण