CSS overscroll-behavior-block गुण

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

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

स्क्रोलिंग लिंक यह है जब एक एलिमेंट पर ओवरस्क्रोलिंग होने से पैरंट एलिमेंट के स्क्रोलिंग व्यवहार को प्रभावित करता है। यह डिफ़ॉल्ट व्यवहार है।

ओवरस्क्रोलिंग फ़ीडबैक यह है जब उपयोगकर्ता गलती से स्क्रोलिंग सीमा से बाहर की ओर कोशिश करता है तो दीजाती जाती है। उदाहरण के लिए，मोबाइल उपकरणों पर, जब उपयोगकर्ता पृष्ठ के शीर्ष से बाहर की ओर स्क्रोल करने की कोशिश करता है तो अक्सर पृष्ठ के रीफ़ेश के दृश्यक फ़ीडबैक के साथ आता है।

CSS के overscroll-behavior-block और overscroll-behavior-inline गुण overscroll-behavior-x और overscroll-behavior-y गुण बहुत अधिक अभिज्ञ है, लेकिन overscroll-behavior-block और overscroll-behavior-inline गुण ब्लॉक दिशा और लाइन दिशा पर निर्भर करता है।

ध्यान दें:संबंधित CSS गुण writing-mode ब्लॉक दिशा को परिभाषित करता है। यह ब्लॉक दिशा x दिशा में या y दिशा में होने के लिए और overscroll-behavior-block गुण का परिणाम। अंग्रेजी पृष्ठों के लिए, ब्लॉक दिशा नीचे की ओर है, लाइन दिशा दांए से बाईं तरफ है।

उदाहरण

उदाहरण 1

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

#yellowDiv {
  overscroll-behavior-block: contain;
}

स्वयं एक प्रयोग कीजिए

उदाहरण 2: writing-mode गुण के साथ संयोजन

<div> एलिमेंट का writing-mode गुण मान 'vertical-rl' के रूप में सेट करने पर, ब्लॉक दिशा x दिशा बन जाती है, इसलिए overscroll-behavior-block अब x दिशा में काम करता है, न कि y दिशा में:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-block: contain;
}

स्वयं एक प्रयोग कीजिए

CSS व्याकरण

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

गुण मान

मान वर्णन
auto स्क्रोलिंग लिंक और ओवरस्क्रोलिंग फ़ीडबैक व्यवहार की अनुमति है। डिफ़ॉल्ट मान।
contain ओवरस्क्रोलिंग फ़ीडबैक व्यवहार की अनुमति है, लेकिन स्क्रोलिंग लिंक की अनुमति नहीं है।
none ओवरस्क्रोलिंग फ़ीडबैक या स्क्रोलिंग लिंक व्यवहार की अनुमति नहीं है।
initial इस गुण को उसके डिफ़ॉल्ट मान पर सेट करें। देखें initial।
inherit अपने पैरंट एलिमेंट से इस गुण को विरासत करें। देखें inherit।

तकनीकी विवरण

डिफ़ॉल्ट मान: auto
विरासत करना: नहीं
एनीमेशन निर्माण: समर्थित नहीं है। देखें:एनीमेशन संबंधी गुण।
संस्करण: CSS3
जेसक्रिप्ट व्याकरण: object.style.overscrollBehaviorBlock="none"

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

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

च्रोम एज फायरफॉक्स सफारी ऑपेरा
63.0 18.0 59.0 16.0 50.0

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

संदर्भ:CSS overscroll-behavior गुण

संदर्भ:CSS overscroll-behavior-inline गुण

संदर्भ:CSS overscroll-behavior-x गुण

संदर्भ:CSS overscroll-behavior-y गुण

संदर्भ:CSS scroll-behavior गुण

संदर्भ:CSS scroll-margin गुण

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

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

संदर्भ:CSS रिटिंग-मोड प्रभाव