स्क्रॉल-स्नैप-प्रकार - सीएसएस-ट्रिक्स

Anonim

scroll-snap-typeसंपत्ति सीएसएस स्क्रॉल स्नैप मॉड्यूल का हिस्सा है। स्क्रॉल स्नपिंग का तात्पर्य विंडो पर (या एक स्क्रॉल करने योग्य कंटेनर) पृष्ठ पर विशिष्ट तत्वों के लिए व्यूपोर्ट की स्थिति को "लॉक करना" है। इसे ऐसे समझें जैसे किसी तत्व के ऊपर चुंबक लगाना जो व्यूपोर्ट के शीर्ष पर चिपक जाता है और पृष्ठ को वहीं स्क्रॉल करने से रोकने के लिए मजबूर करता है।

यदि आप ब्राउज़र को पृष्ठ पर विशिष्ट बिंदुओं पर रोकना चाहते हैं तो यह उपयोगी है। उदाहरण के लिए: फोटो गैलरी ब्राउज़ करने वाला उपयोगकर्ता शायद छवि के पिछले हिस्से को स्क्रॉल नहीं करना चाहता है - वे संभवतः स्क्रॉल करते समय छवि "स्नैप" को सही स्थिति में रखना पसंद करेंगे। स्क्रॉल स्नपिंग डेवलपर्स को इस व्यवहार को संभालने के लिए एक शुद्ध-सीएसएस तरीका देता है।

scroll-snap-typeकिसी भी स्क्रॉल करने योग्य कंटेनर पर एक आवश्यक संपत्ति है जिसे आप स्क्रॉल स्नैपिंग में जोड़ना चाहते हैं। यह एक स्क्रॉल कंटेनर के लिए तीन सवालों के जवाब देता है:

  1. क्या कंटेनर स्क्रॉल स्नैपिंग का उपयोग करता है?
  2. किस अक्ष पर - x (क्षैतिज), y (लंबवत), ब्लॉक, या इनलाइन - स्क्रॉलिंग स्नैपिंग लागू होना चाहिए?
  3. स्क्रॉल स्नैपिंग को कैसे करना चाहिए? क्या यह 100% समय के लिए मजबूर है, या क्या यह केवल तभी प्रभावी होता है जब उपयोगकर्ता स्नैप स्थिति के लिए "पर्याप्त रूप से बंद" हो जाता है? इस पर और बाद में।
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

वाक्य - विन्यास

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

मूल्यों

scroll-snap-type निम्नलिखित मूल्यों को स्वीकार करता है:

  • none स्क्रॉल स्नैपिंग अक्षम करता है।
  • x केवल एक्स-अक्ष के साथ स्क्रॉल स्नैपिंग सक्षम करता है।
  • y केवल y- अक्ष के साथ स्क्रॉल स्नैपिंग सक्षम करता है।
  • block केवल ब्लॉक-अक्ष के साथ स्क्रॉल स्नैपिंग सक्षम करता है।
  • inline केवल इनलाइन-अक्ष के साथ स्क्रॉल स्नैपिंग सक्षम करता है।
  • bothदोनों अक्ष (जो आप के रूप में सोच सकते हैं के साथ स्क्रॉल स्नैप करने में सक्षम बनाता है xऔर y, या inlineऔर block।
  • mandatory एक सख्ती मूल्य है जो ब्राउज़र को हमेशा स्नैप स्थिति में जाने के लिए कहता है जब स्क्रॉलिंग नहीं होती है।
  • proximityएक सख्ती मूल्य है जो ब्राउज़र को एक स्नैप स्थिति में जाने के लिए कहता है यदि स्क्रॉलिंग कार्रवाई स्नैप स्थिति के बहुत करीब हो जाती है। यदि यह बहुत करीब नहीं है, तो ब्राउज़र को स्नैप नहीं करना चाहिए और स्क्रॉल करना सामान्य रूप से व्यवहार करेगा।

उदाहरण


CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन स्क्रॉल-स्नैप-प्रकार का उदाहरण देखें।

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

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
69. है ६ 68 1 1* । ९ 1 1

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 .५ 81 11.0-11.2

सम्बंधित

  • scroll-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

साधन

  • सीएसएस स्क्रॉल स्नैप डब्ल्यू 3 सी उम्मीदवार की सिफारिश
  • प्रैक्टिकल सीएसएस स्क्रॉल तड़क
  • पेश है CSS स्क्रॉल स्नैप पॉइंट