Skip to main content

सीएसएस स्क्रॉल स्नैप जनरेटर क्षैतिज और ऊर्ध्वाधर स्क्रॉलिंग के लिए सीएसएस स्क्रॉल स्नैप लेआउट उत्पन्न करें जिसमें स्नैप संरेखण हो।

सीएसएस स्क्रॉल स्नैप जनरेटर illustration
🎨

सीएसएस स्क्रॉल स्नैप जनरेटर

क्षैतिज और ऊर्ध्वाधर स्क्रॉलिंग के लिए सीएसएस स्क्रॉल स्नैप लेआउट उत्पन्न करें जिसमें स्नैप संरेखण हो।

1

स्क्रॉल दिशा चुनें

अपने स्नैप कंटेनर के लिए क्षैतिज या ऊर्ध्वाधर स्क्रॉलिंग का चयन करें।

2

स्नैप व्यवहार कॉन्फ़िगर करें

स्नैप प्रकार (आवश्यक या निकटता) और स्नैप संरेखण (प्रारंभ, केंद्र, अंत) सेट करें।

3

सीएसएस कॉपी करें

स्नैप व्यवहार देखने के लिए पूर्वावलोकन को स्क्रॉल करें और कंटेनर और आइटम सीएसएस कॉपी करें।

Loading tool...

What Is सीएसएस स्क्रॉल स्नैप जनरेटर?

सीएसएस स्क्रॉल स्नैप जनरेटर शुद्ध सीएसएस के साथ करousel जैसे अनुभव बनाने के लिए स्नैप-स्क्रॉल लेआउट बनाता है। स्क्रॉल स्नैप एक मूल, चिकनी स्क्रॉलिंग अनुभव प्रदान करता है जहां सामग्री परिभाषित स्थितियों पर स्नैप होती है। यह टूल दोनों क्षैतिज और ऊर्ध्वाधर स्क्रॉल दिशाओं को सपोर्ट करता है, जिसमें स्नैप प्रकार (सख्त स्नैपिंग के लिए अनिवार्य, लचीली स्नैपिंग के लिए निकटता) और स्नैप संरेखण (प्रारंभ, मध्य, या अंत) के लिए नियंत्रण होते हैं। आप आइटमों के बीच के अंतराल और स्क्रॉल आइटमों की संख्या को समायोजित कर सकते हैं। पूर्वावलोकन पूरी तरह से इंटरैक्टिव है - आइटमों के माध्यम से स्क्रॉल करके स्नैप व्यवहार को देखें। उत्पन्न सीएसएस में कंटेनर स्क्रॉल-स्नैप-टाइप गुण और आइटम स्क्रॉल-स्नैप-अलाइन गुण दोनों शामिल हैं, जिससे आपको स्नैप स्क्रॉलिंग लागू करने के लिए पूरा कोड मिलता है।

Why Use सीएसएस स्क्रॉल स्नैप जनरेटर?

  • क्षैतिज और ऊर्ध्वाधर स्क्रॉल स्नैप दोनों का समर्थन
  • आवश्यक और निकटता स्नैप प्रकार विकल्प
  • वास्तविक स्क्रॉलिंग प्रदर्शन के साथ इंटरैक्टिव पूर्वावलोकन
  • प्योर सीएसएस समाधान जिसमें जावास्क्रिप्ट की आवश्यकता नहीं है

Common Use Cases

इमेज कैरसेल

जावास्क्रिप्ट लाइब्रेरी के बिना स्वदेशी महसूस करने वाले इमेज कैरसेल बनाएं।

उत्पाद गैलरी

ई-कॉमर्स साइटों के लिए स्नैपिंग उत्पाद गैलरी बनाएं।

पूर्ण-पेज स्क्रॉलिंग

पूर्ण-पेज ऊर्ध्वाधर स्क्रॉलिंग अनुभाग लागू करें।

स्टोरी/कार्ड फीड

मोबाइल-अनुकूल क्षैतिज कार्ड फीड बनाएं जिसमें स्नैप स्क्रॉलिंग हो।

Technical Guide

सीएसएस स्क्रॉल स्नैप दो मुख्य गुणों का उपयोग करता है: कंटेनर पर स्क्रॉल-स्नैप-टाइप और आइटम पर स्क्रॉल-स्नैप-अलाइन। स्क्रॉल-स्नैप-टाइप एक अक्ष (x, y, या दोनों) और एक सख्तता मान (अनिवार्य या निकटता) लेता है। अनिवार्य स्क्रॉल स्थिति को एक स्नैप बिंदु पर स्नैप करने के लिए मजबूर करता है, जबकि निकटता केवल एक स्नैप बिंदु के पास होने पर स्नैप करती है। आइटमों पर स्क्रॉल-स्नैप-अलाइन यह परिभाषित करता है कि आइटम कहां स्नैप होता है: प्रारंभ कंटेनर प्रारंभ को संरेखित करता है, मध्य मध्य में और अंत कंटेनर अंत में। अतिरिक्त गुणों में कंटेनर पर स्क्रॉल-पैडिंग शामिल है जो ऑफसेट स्नैप स्थितियों के लिए है, और आइटमों पर स्क्रॉल-मार्जिन व्यक्तिगत स्नैप ऑफसेट के लिए है। स्नैप के लिए काम करने के लिए, कंटेनर को ओवरफ्लो: ऑटो या ओवरफ्लो: स्क्रॉल और परिभाषित आयामों की आवश्यकता होती है। स्क्रॉल व्यवहार चिकना है और मूल ब्राउज़र स्क्रॉलिंग का उपयोग करता है, जिससे उत्कृष्ट प्रदर्शन मिलता है। आधुनिक ब्राउज़र सीएसएस स्नैप को विक्रेता उपसर्गों के बिना पूरी तरह से सपोर्ट करते हैं।

Tips & Best Practices

  • 1
    सख्त कैरसेल व्यवहार के लिए आवश्यक स्नैप प्रकार का उपयोग करें
  • 2
    स्नैप पदों को कंटेनर किनारों से ऑफसेट करने के लिए स्क्रॉल-पैडिंग जोड़ें
  • 3
    पेज स्क्रॉलिंग को रोकने के लिए अंत तक पहुंचने पर overscroll-behavior: contain सेट करें
  • 4
    आइटमों को संकुचित होने से रोकने के लिए उन पर flex-shrink: 0 सेट करें

Related Tools

Frequently Asked Questions

Q आवश्यक और निकटता के बीच क्या अंतर है?
आवश्यक हमेशा निकटतम बिंदु पर स्नैप करता है। निकटता केवल तभी स्नैप करती है जब स्क्रॉल स्थिति एक स्नैप बिंदु के करीब होती है।
Q क्या स्क्रॉल स्नैप मोबाइल पर काम करता है?
हाँ, सीएसएस स्क्रॉल स्नैप मोबाइल पर स्वदेशी टच स्क्रॉलिंग और गति के साथ उत्कृष्ट रूप से काम करता है।
Q क्या मैं सीएसएस ग्रिड के साथ स्क्रॉल स्नैप का उपयोग कर सकता हूँ?
हाँ, स्क्रॉल स्नैप ग्रिड और फ्लेक्सबॉक्स सहित किसी भी लेआउट विधि के साथ काम करता है।
Q मैं चिकनी स्क्रॉलिंग कैसे जोड़ सकता हूँ?
स्नैप बिंदुओं के बीच एनिमेटेड स्क्रॉलिंग के लिए कंटेनर में scroll-behavior: smooth जोड़ें।
Q क्या स्क्रॉल स्नैप सभी ब्राउज़रों में समर्थित है?
हाँ, सीएसएस स्क्रॉल स्नैप विक्रेता-पूर्वसर्ग के बिना सभी आधुनिक ब्राउज़रों में समर्थित है।

About This Tool

सीएसएस स्क्रॉल स्नैप जनरेटर is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.