CSS scroll-margin गुण

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

scroll-margin विशेषता विशेषता स्नैप स्थान और विशेषता के बीच की दूरी निर्दिष्ट करती है。

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

स्नैप स्थान यह होता है कि संघटक रोल करने पर, इसे विशेषता में स्थित होने का स्थान है。

scroll-margin विशेषता निम्नलिखित विशेषताओं का लघुरूप है:

• scroll-margin-top
• scroll-margin-bottom
• scroll-margin-left
• scroll-margin-right

यदि scroll-margin विशेषता की चार मूल्य हैं:

scroll-margin: 15px 30px 60px 90px;

• ऊपरी दूरी 15px
• दायाँ ओर की दूरी 30px
• निचला दूरी 60px
• बाईं ओर की दूरी 90px

यदि scroll-margin विशेषता की तीन मूल्य हैं:

scroll-margin: 15px 30px 60px;

• ऊपरी दूरी 15px
• The distance on both sides is 30px
• निचला दूरी 60px

यदि scroll-margin विशेषता की दो मूल्य हैं:

scroll-margin: 15px 30px;

• The distance from the top and bottom is 15px
• The distance on both sides is 30px

If the scroll-margin property has one value:

scroll-margin: 10px;

• The distance in all four directions is 10px

To see scroll-margin Properties effect on the parent element, must be set on the child element scroll-margin and scroll-snap-align Property, and set scroll-snap-type Property.

Note:In the following example, scroll margins are set on all sides, but due to scroll-snap-align The property is set to "start", so only the top scroll margin has changed the scrolling behavior.

Instance

Example 1

Set the scroll margin between the吸附 position and the container to 20px:

div {
  scroll-margin: 20px;
}

Try it yourself

Example 2: Image library

scroll-margin This property can be used in image libraries with sticky behavior. Here,scroll-margin Let the user see that there is another image on the left. To see the effect, scroll past the first image:

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

Try it yourself

Example 3: Set the scroll margin at the bottom and right

Can be set at the bottom and right of the element scroll-margin Property. To see the effect, scroll horizontally and vertically to the next element:

#container > div {
  scroll-margin: 0 10px 30px 0;
}

Try it yourself

CSS syntax

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

Attribute value

Technical details

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

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

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

संदर्भ:CSS स्क्रॉल-मार्जिन-बोटम प्रतियोगिता

संदर्भ:CSS स्क्रॉल-मार्जिन-लेफ्ट प्रतियोगिता

संदर्भ:CSS स्क्रॉल-मार्जिन-राइट प्रतियोगिता

संदर्भ:CSS स्क्रॉल-मार्जिन-टॉप प्रतियोगिता

संदर्भ:CSS स्क्रॉल-स्नैप-एलाइन प्रतियोगिता

संदर्भ:CSS स्क्रॉल-स्नैप-टाइप प्रतियोगिता