CSS scroll-margin-left विशेषता

अर्थ और उपयोग

scroll-margin-left गुण के द्वारा अधिकार बदलने की दूरी को कंटेनर से निर्दिष्ट करें।

अधिकार बदलना इसका अर्थ है कि बच्चे एलेमेंट जब स्क्रॉल को रुकावट दी जाए तो उसका अस्थान कंटेनर में तब तक फ़िक्स्ड रहता है जब तक कि वह स्क्रॉल को रुकावट नहीं देता।अधिकार बदलना इसका अर्थ है कि और गुण के सेट करने के बाद भी, यह CSS गुण के प्रभाव से भी प्रभावित हो सकता है direction गुण के प्रभाव को देखने के लिए पिता एलेमेंट पर सेट करना चाहिए writing-mode प्रभाव का

ध्यान दें:इस गुण केवल जब अधिकार बदलने का स्थान बच्चे एलेमेंट के बाएं छोर पर हो जाए तभी प्रभावी होता है।

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

उदाहरण

उदाहरण 1

संदूषण स्थान और कंटेनर के बीच गति के बाहरी मार्जिन को 20px सेट करें:

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

अपने आप साबित करें

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

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

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

अपने आप साबित करें

उदाहरण 3: अधिकार बदलना

इसके लिए scroll-margin-left गुण काम करेगा, और अधिकार बदलने के लिए बच्चे एलेमेंट के बाएं छोर पर अधिकार निर्धारित करना चाहिए।इस उदाहरण मेंdirection गुण का अधिकार बदला है: बच्चे एलेमेंट के बाएं छोर से दाएं छोर तक।इस तरह के कोड का प्रयोग करकेscroll-margin-left गुण अब काम नहीं करेगा:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-left: 30px;
  scroll-snap-align: none start;
}

अपने आप साबित करें

CSS व्याकरण

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

गुण वैल्यू

वैल्यू वर्णन
0 गति के बाहरी मार्जिन के बाएं छोर 0 है।डिफ़ॉल्ट वैल्यू।
length

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

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

तकनीकी विवरण

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

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

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

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

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

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

संदर्भ:CSS scroll-snap-align विशेषता

संदर्भ:CSS scroll-snap-type विशेषता

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