CSS स्क्रोल-स्नैप-एलाइन प्रतियोगिता

विन्यास और उपयोग

scroll-snap-align गुण यह निर्दिष्ट करता है कि जब आप स्क्रॉल को रुकावट दें तो एलिमेंट फोकस की स्थिति पर बंध जाएगा

स्क्रॉल स्नैप एक्टिविटी को प्रदर्शित करने के लिए, आपको उप-एलिमेंट पर गुण सेट करना होगा scroll-snap-align गुण, और मात्रा एलिमेंट पर सेट करें scroll-snap-type गुण।

उदाहरण

उदाहरण 1

जब उपयोगकर्ता रोलिंग करता है तो, निकटतम एलेमेंट को केंद्र में एड्स करें:

div {
  scroll-snap-align: center;
}

स्वयं अभिप्राय करें

उदाहरण 2: फोटोग्राफ लाइब्रेरी

scroll-snap-align गुण फोटोग्राफ लाइब्रेरी के लिए बहुत उपयोगी है। यहाँ, रोलिंग दिशा सीधी है और एड्स जैस्टिफ़ाइ करने के तरीका बीच है। उपयोगकर्ता जब रोलिंग बार छोड़ता है तो निकटतम फोटो गतिशील क्षेत्र के बीच पर एड्स करता है। एक फोटो पर क्लिक करें और इसे बाएं-दाएं आरेखड़ियों के द्वारा घूमें:

#container > img {
  scroll-snap-align: none center;
}
बीजिंग नृत्यक वुहान ट्यूलीप हंगझोउ

स्वयं अभिप्राय करें

जंगली पहाड़ों में अली ब्रिज, कैमरा वाला आदमी, किन्क्वे टेरे

उदाहरण 3: ब्लॉक दिशा में अनुत्तर एड्स स्थान के लिए

सीधे रोलिंग के दौरानscroll-snap-align गुण ब्लॉक दिशा में भी एलेमेंट के प्रारंभ स्थान पर सेट किया जा सकता है:

#container > div {
  scroll-snap-align: start none;
}

स्वयं अभिप्राय करें

CSS व्याकरण

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

गुण मूल्य

मूल्य वर्णन
none कोई रोलिंग एड्स प्रभाव नहीं है। डिफ़ॉल्ट मूल्य。
start x और y अक्ष पर, एलेमेंट के शुरू में रोलिंग एड्स करें。
end x और y अक्ष पर, एलेमेंट के अंत में रोलिंग एड्स करें。
center x और y अक्ष पर, एलेमेंट के केंद्र में रोलिंग एड्स करें。
ब्लॉक इनलाइन दो तर्क संग्रह व्याकरण। पहला तर्क ब्लॉक दिशा पर एड्स के तरीके को निर्दिष्ट करता है, दूसरा तर्क लाइन दिशा पर एड्स के तरीके को निर्दिष्ट करता है。
initial इस गुण को इसके डिफ़ॉल्ट मूल्य पर सेट करें। देखें initial.
inherit इस गुण को उसके माता एलेमेंट से विरासत करें। देखें inherit.

तकनीकी विवरण

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

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

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

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

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

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