स्क्रॉल-स्नैप-संरेखित करें - सीएसएस-ट्रिक्स

Anonim

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

scroll-snap-alignस्क्रॉल-स्नपिंग कंटेनर के भीतर स्क्रॉल-स्नैपिंग तत्व के लिए एक आवश्यक संपत्ति है। स्क्रॉल-स्नपिंग कंटेनरों के बारे में अधिक जानकारी के लिए scroll-snap-typeपंचांग प्रविष्टि देखें । scroll-snap-alignब्राउज़र एक तत्व का कौन सा हिस्सा है जब एक तस्वीर बिंदु का सामना करना पड़ा है गठबंधन किया जाना चाहिए बताता है: चाहिए तत्व की ओर स्नैप start, centerया endपैरेंट कंटेनर कि शामिल की scroll-snap-typeसंपत्ति?

यदि आप किसी तत्व को उस तत्व की शुरुआत में स्नैप करना चाहते हैं, तो उसे ऐसा scroll-snap-alignमान दें:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

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

scroll-snap-align: ( none | start | end | center )(1,2)

आप इस संपत्ति के लिए क्रमशः ब्लॉक और इनलाइन कुल्हाड़ियों का प्रतिनिधित्व करते हुए 2 मान तक निर्दिष्ट कर सकते हैं। यदि आप केवल 1 मूल्य देते हैं, तो उस मूल्य का उपयोग दोनों अक्षों के लिए किया जाएगा।

मूल्यों

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

  • none तत्व पर स्क्रॉल स्नैपिंग अक्षम करता है
  • start एलिमेंट की शुरुआत स्क्रॉल कंटेनर के स्नैक के साथ होती है जब वह जगह में तड़क जाता है
  • end तत्व के अंत को स्क्रॉल कंटेनर के स्निपेट के साथ संरेखित करता है जब जगह में तड़क जाता है
  • center तत्व के केंद्र को स्क्रॉल कंटेनर के स्निपेट के साथ संरेखित करता है जब जगह में तड़क जाता है

उदाहरण

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

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

डेस्कटॉप

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

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

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

सम्बंधित

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-stop

साधन

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