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

Anonim

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

scroll-snap-stopस्क्रॉल-स्नपिंग कंटेनर के भीतर स्क्रॉल-स्नैपिंग तत्व के लिए एक वैकल्पिक संपत्ति है। स्क्रॉल-स्नपिंग कंटेनरों के बारे में अधिक जानकारी के लिए scroll-snap-typeपंचांग प्रविष्टि देखें ।

scroll-snap-stopआपको स्क्रॉल-स्नपिंग कंटेनर को किसी विशेष तत्व पर स्नैप करने के लिए बाध्य करने की अनुमति देता है। मान लीजिए कि आप स्क्रॉल-स्नैपिंग कंटेनर के भीतर स्क्रॉल कर रहे थे, और आपने इसे एक विशाल स्पिन-ऑफ-मूसवेल दिया। आम तौर पर, ब्राउज़र आपकी स्क्रॉलिंग के वेग को पिछले स्नैप बिंदुओं तक उड़ने देता है जब तक कि वह स्नैप बिंदु पर बंद नहीं हो जाता है जहां स्क्रॉल सामान्य रूप से समाप्त हो जाएगा। सेट करके scroll-snap-stopआप ब्राउज़र को बता सकते हैं कि उपयोगकर्ता को अनुमति देने से पहले उसे किसी विशेष तत्व पर रोकना होगा।

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

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

scroll-snap-stop: normal | always;

मूल्यों

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

  • normal डिफ़ॉल्ट मान है और एक तत्व को तड़कने के बिना पिछले स्क्रॉल करने की अनुमति देता है
  • always ब्राउज़र को इस तत्व को स्नैप करने के लिए बाध्य करेगा, भले ही स्क्रॉल सामान्य रूप से इस तत्व को पार कर जाए

उदाहरण


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

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

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

डेस्कटॉप

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

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

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

ध्यान दें कि Chrome scroll-snap-stop: always;इस समय समर्थन नहीं कर सकता है ।

सम्बंधित

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

साधन

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