CSS scroll-margin-top गुण

व्याख्या और उपयोग

scroll-margin-top स्थिति के गुण के साथ-साथ आवरण के बीच की दूरी को निर्दिष्ट करता है।

स्थिति का निर्दिष्ट करता है।स्थिति का निर्दिष्ट करने के द्वारा और गुण का सेट करने के साथ-साथ CSS गुण प्रवाह गुण के प्रभाव को देखने के लिए पिता एलीमेंट पर सेट करें writing-mode का प्रभाव

ध्यान दें:इस गुण केवल जब स्थिति स्थानीय एलीमेंट के शीर्ष पर सेट किया जाए तभी प्रभावी होगा。

देखना scroll-margin-top सेट करना आवश्यक है scroll-margin-top गुण के प्रभाव को देखने के लिए पिता एलीमेंट पर सेट करें और गुण scroll-snap-type गुण

उदाहरण

उदाहरण 1

स्थिति और कंटेनर के बीच शीर्ष स्क्रॉल बाहरी किनारा को 20px पर सेट करें:

div {
  scroll-margin-top: 20px;
}

अपने आप सिर्फ एक प्रयोग करें

उदाहरण 2: छवि लाइब्रेरी

scroll-margin-top गुण एक अधिकारण वाले छवि गैलरी में प्रयोग किया जा सकता है।यहाँscroll-margin-top उपयोगकर्ता को बताना कि शीर्ष में एक और छवि है।पहली छवि को स्क्रॉल करके प्रभाव को देखें:

#container > img {
  scroll-margin-top: 30px;
}

अपने आप सिर्फ एक प्रयोग करें

उदाहरण 3: स्थिति आसन

इसे scroll-margin-top गुण काम करेगा और उपांगुण की स्थिति को उपांगुण के शीर्ष पर सेट करना आवश्यक होगा।इस उदाहरण मेंwriting-mode गुण उपांगुण की स्थिति को उपांगुण के शीर्ष से बदलकर दायाँ तरफ बदल देगा।इस तरह के कोड का प्रयोग करकेscroll-margin-top गुण अब काम करेगा नहीं:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

अपने आप सिर्फ एक प्रयोग करें

CSS व्याकरण

scroll-margin-top: 0|value|initial|inherit;

गुण मूल्य

मूल्य वर्णन
0 शीर्ष स्क्रॉल बाहरी किनारा 0 है।यह मूलभूत मूल्य है。
length

px, pt, cm आदि इकाइयों में शीर्ष स्क्रॉल बाहरी किनारा के मूल्य को निर्दिष्ट करें।नकारात्मक मूल्यों का प्रयोग किया जा सकता है。

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

तकनीकी विवरण

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

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

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

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

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

संदर्भःCSS दिशा विशेषता

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

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

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