CSS scroll-margin-block-end प्रकृति

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

scroll-margin-block-end गुण ब्लॉक दिशा पर, सहायक स्थान और टैंकी के बीच की दूरी निर्धारित करता है。

इसका मतलब है कि जब आप स्क्रॉलिंग को रोकते हैं, स्क्रॉलिंग तेजी से समायोजित हो जाती है और ब्लॉक दिशा पर सहायक एलिमेंट के समाप्त होने के स्थान से बाकी तंत्र के बीच निर्धारित दूरी पर रुक जाती है。

ब्लॉक दिशा वर्तमान पंक्ति के अपेक्षाकृत स्थान है, अगला पंक्ति जिस दिशा में रखा जाता है। यह भी CSS display: block; के टैग (जैसे <p> और <div> टैग) पृष्ठ पर व्यवस्था के तरीका है। ब्लॉक दिशा लिखने की भाषा पर निर्भर करती है, उदाहरण के लिए, मंगोलियन के नए पंक्ति से बाईं दाईं ओर रखे जाते हैं, इसलिए ब्लॉक दिशा भी बाईं दाईं ओर है, जबकि अंग्रेजी पृष्ठ की ब्लॉक दिशा नीचे है। ब्लॉक दिशा CSS गुण के द्वारा परिभाषित की जाती है writing-mode से निर्धारित करता है।

ग्राहक स्थान यह निर्दिष्ट करता है कि जब आप स्क्रॉल को रुकावट देते हैं तो सहायक एलेमेंट कंटेनर में ग्राहक स्थान पर आकर रुकता है।

ध्यान दें:यह गुण केवल ब्लॉक दिशा में और गुण को 'end' पर सेट करने पर ही कार्य करता है।

लेकिन scroll-margin-block-end गुण के प्रभाव को देखने के लिए पिता एलेमेंट पर सेट करना चाहिए scroll-margin-block-end और और गुण scroll-snap-type गुण।

CSS के scroll-margin-inline और scroll-margin-block गुण CSS गुण CSS scroll-margin-top गुण、scroll-margin-bottom、scroll-margin-left और scroll-margin-right बहुत ही समान है, लेकिन scroll-margin-block और scroll-margin-inline गुण ब्लॉक दिशा और इनलाइन दिशा पर निर्भर करता है。

उदाहरण

उदाहरण 1

ब्लॉक दिशा में, एलेमेंट और कंटेनर के बीच की समानता से रोलिंग बाह्य किनारा 20px पर सेट करें:

div {
  scroll-margin-block-end: 20px;
}

अपने आप प्रयोग करें

उदाहरण 2

जब <div> एलेमेंट का writing-mode गुण को vertical-rl पर सेट करने पर ब्लॉक दिशा से दायां बाईं बदलती है। परिणामस्वरूप एलेमेंट का अंतिम हिस्सा तल से बाईं ओर जाता है:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

अपने आप प्रयोग करें

CSS ग्रामर

scroll-margin-block-end: 0|value|initial|inherit;

गुण मूल्य

मूल्य वर्णन
0 मूलभूत
length

पिक्सेल (px), पैन (pt), सेंटीमीटर (cm) आदि इकाइयों में दूरी निर्दिष्ट करें। नकारात्मक मूल्य भी अनुमति है।

देखें:सीएसएस इकाई।
initial इस गुण को उसके मूलभूत मूल्य पर सेट करें। देखें: initial।
inherit इस गुण को उसके पिता एलेमेंट से विरासत करें। देखें: inherit।

तकनीकी विवरण

मूलभूत मूल्य: 0
विरासत करने की क्षमता: नहीं
एनीमेशन निर्माण: समर्थन नहीं है। देखें:एनीमेशन से संबंधित गुण।
संस्करण: CSS3
जेसक्रिप्ट ग्रामर: object.style.scrollMarginBlockEnd="20px"

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

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

च्रोम एज फायरफॉक्स सैफारी ओपेरा
69.0 79.0 68.0 14.1 56.0

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

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

संदर्भःCSS scroll-snap-type गुण

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