CSS स्क्रॉल-मार्जिन-बॉटम एट्रिब्यूट

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

scroll-margin-bottom अभिलक्षण विशिष्ट आधार के साथ भांतर निर्धारित करता है。

स्थान बदलना का अर्थ है कि स्थानांतरण करने के बाद स्थानांतरण करने वाले एलीमेंट को कंटेनर में स्थानांतरण करने का स्थान।

स्थान बदलना scroll-snap-align स्थान बदलना द्वारा के प्रभाव को गुण के प्रभाव को देखने के लिए writing-mode गुण के सेट किए जाने

directionके प्रभाव को

ध्यान दें: scroll-margin-bottom यह गुण केवल जब उप-एलीमेंट के निचले भाग पर स्थान बदलना सेट किया जाता है तभी प्रभावी होता है। scroll-margin-bottom गुण के प्रभाव को देखने के लिए scroll-snap-align गुण को और scroll-snap-type गुण

उदाहरण

उदाहरण 1

स्थान बदलना और कंटेनर के बीच घुमाव के निचले बाहरी किनारे का घुमाव 20px सेट करें:

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

खुद संभवतः प्रयोग करें

उदाहरण 2: चित्र गैलरी

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

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

खुद संभवतः प्रयोग करें

उदाहरण 3: स्थान बदलना

करने के लिए scroll-margin-bottom गुण वैध होगा, स्थान बदलना उप-एलीमेंट के निचले भाग पर सेट करना होगा।इस उदाहरण मेंwriting-mode गुण उप-एलीमेंट के निचले भाग से लेकर बाईं ओर तक के लिए स्थान बदलेगा।इस तरह के कोड का प्रयोग करते हैं तोscroll-margin-bottom गुण अब और नहीं वैध होगा:

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

खुद संभवतः प्रयोग करें

CSS व्याकरण

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

गुण मूल्य

मूल्य वर्णन
0 घुमाव के निचले बाहरी किनारे का घुमाव शून्य है।यह मूलभूत मूल्य है।
length

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

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

तकनीकी विवरण

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

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

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

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

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

संदर्भ：CSS direction गुण

संदर्भ：CSS स्क्रॉल-स्नैप-एलाइन एट्रिब्यूट

संदर्भ：CSS स्क्रॉल-स्नैप-टाइप एट्रिब्यूट

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