सीएसएस स्क्रॉल स्नैप पॉइंट्स का एक परिचय
सीएसएस स्क्रॉल स्नैप मॉड्यूल एक वेब मानक है जो हमें कुछ नियंत्रण प्रदान करता है एक वेब पेज पर स्क्रॉल करना ताकि हम उपयोगकर्ताओं को केवल उस पर कहीं भी करने के बजाय किसी पृष्ठ के कुछ भागों में स्क्रॉल कर सकें.
स्क्रॉल एक वेबसाइट पर सबसे अधिक निष्पादित क्रियाओं में से एक है। वर्षों से ब्राउज़रों, है उनके स्क्रॉलिंग प्रदर्शन में सुधार हुआ उपयोगकर्ताओं की चुस्त उंगली की ताकत का मिलान करने के लिए। और, डेवलपर्स है रचनात्मक रूप से स्क्रॉलिंग का उपयोग किया गया एक बेहतर या एक आउट-ऑफ-द-बॉक्स उपयोगकर्ता अनुभव प्राप्त करने के लिए.
हालांकि, जब यह परस्पर संबंध की बात आती है कोडिंग और स्क्रॉलिंग, केवल जावास्क्रिप्ट को बाद के किसी भी नियंत्रण की मात्रा प्रतीत होती थी। यह समय की लंबी अवधि के लिए ऐसा था, लेकिन इसके साथ स्क्रॉल स्नैप पॉइंट की शुरूआत, सीएसएस ने पकड़ना शुरू किया.
स्क्रॉलिंग पॉइंट्स के बिना स्क्रॉल करना
आमतौर पर, हम बहुत धीमी गति से स्क्रॉल नहीं करते हैं, खासकर फोन पर। आप जितनी तेज़ी से स्क्रॉल करेंगे, आपके पास उतना कम नियंत्रण होगा स्क्रीन पर आप कहाँ समाप्त होंगे जब आपने स्क्रॉल करना बंद कर दिया.
कल्पना करें कि आप किसी वेबसाइट, या फ़ोटो की गैलरी, या ऑनलाइन स्लाइड पर उत्पाद छवि की एक सरणी के माध्यम से स्क्रॉल कर रहे हैं। आप इस तरह के अनुप्रयोगों में क्या पसंद करेंगे पूरा उत्पाद, फोटो या स्लाइड देखें हर बार जब आप स्क्रॉल करते हैं। न केवल ए अंश उत्पाद की छवि, फोटो, या स्लाइड.
उदाहरण के लिए, नीचे दिए गए डेमो पर आप देख सकते हैं कि जब भी उपयोगकर्ता स्क्रॉल करना बंद करता है, केवल लगभग आधी छवि दिखाई दे रही है स्क्रीन के नीचे। हालांकि, अधिकांश उपयोगकर्ता अंतिम छवि को पूरी तरह से देखना पसंद करेंगे.
स्क्रॉल स्नैप पॉइंट के साथ स्क्रॉल करना
यह वह जगह है जहां हम लाते हैं CSS स्क्रॉल स्नैप पॉइंट. नाम स्व-व्याख्यात्मक है; यह एक सीएसएस मानक है जो हमें अनुमति देता है जगह में आइटम स्नैप करें जब स्क्रॉल करना.
वहां पांच सीएसएस गुण इस मानक का गठन:
स्क्रॉल-स्नैप-प्रकारस्क्रॉल स्नैप-अंक-xस्क्रॉल स्नैप-अंक-yस्क्रॉल-स्नैप-समन्वयस्क्रॉल-स्नैप-गंतव्य
ब्राउज़र का समर्थन
गुण जरुरत -वेबकिट तथा -सुश्री उपसर्गों प्रासंगिक ब्राउज़रों के लिए। इस लेख को लिखने के रूप में, क्रोम और ओपेरा में CSS स्क्रॉल स्नैप समर्थित नहीं है.
ध्यान दें कि अंतिम चार संपत्तियों को निकट भविष्य में उपयोगकर्ता एजेंटों द्वारा गिराए जाने की संभावना है। बजाय, नए गुण, यानी स्क्रॉल-स्नैप-align, स्क्रॉल-स्नैप-मार्जिन, तथा स्क्रॉल-स्नैप-गद्दी, बनाया जा सकता है, जैसा कि इस विनिर्देश में परिभाषित किया गया है.
हालांकि, वे करेंगे एक समान उद्देश्य है पूर्व के गुणों के रूप में। वर्तमान में, गुणों का पूर्व सेट ठीक काम करेगा.
गुण
आपको जोड़ें स्क्रॉल-स्नैप-प्रकार स्क्रॉल कंटेनर में संपत्ति (कंटेनर तत्व जिनके बच्चे स्क्रॉल करते हुए ओवरफ्लो कर रहे हैं)। यह निर्दिष्ट करता है स्नैप कार्रवाई की कठोरता. यह तीन मान ले सकता है:
अनिवार्य- जब स्क्रॉलिंग समाप्त हो जाती है, तो स्क्रॉलिंग समाप्त हो जाएगी एक प्रासंगिक स्नैप बिंदु पर स्नैप करेंनिकटता- से कम सख्तअनिवार्य; यह के निर्णय पर निर्भर करते हैं यूए क्या तत्व किसी दिए गए स्नैप बिंदु पर स्नैप करेगाकोई नहीं- कोई तड़क-भड़क नहीं की जाती है
स्क्रॉल स्नैप-अंक-x तथा स्क्रॉल स्नैप-अंक-y गुण स्क्रॉल कंटेनर के हैं, भी। वे x- और y- अक्ष पर उन बिंदुओं को संदर्भित करते हैं जहां स्नैप बिंदु मौजूद होंगे। उनका मूल्य है द्वारा दिया गया दोहराने () समारोह. उदाहरण के लिए, यदि आप x- अक्ष के साथ स्नैप बिंदुओं को जोड़ना चाहते हैं 100px आप का उपयोग करने की जरूरत है स्क्रॉल-स्नैप-पॉइंट-एक्स: रिपीट (100px) नियम.
स्क्रॉल-स्नैप-गंतव्य प्रॉपर्टी को स्क्रॉल कंटेनर में भी जोड़ा जाता है। यह कंटेनर पर एक समन्वय को परिभाषित करता है जहां एक गंतव्य स्थान निहित है। यह इस स्नैप गंतव्य स्थान पर है जहां कंटेनर के बच्चे स्क्रॉल किए जाने पर जगह में स्नैप करेंगे.
आप उपयोग कर सकते हैं स्क्रॉल-स्नैप-समन्वय के साथ संयोजन के रूप में संपत्ति स्क्रॉल-स्नैप-गंतव्य. आपको इसे कंटेनर के बाल तत्वों में जोड़ना होगा। यह बाल तत्वों के निर्देशांक को परिभाषित करता है, जब उपयोगकर्ता स्क्रीन को स्क्रॉल करता है तो अपने स्क्रॉल कंटेनर के गंतव्य निर्देशांक के साथ संरेखित करेगा.
ध्यान दें कि आपको एक ही बार में सभी संपत्तियों का उपयोग करने की आवश्यकता नहीं है. केवल स्क्रॉल-स्नैप-प्रकार आवश्यक है. इसके साथ ही, आप या तो व्यक्तिगत स्नैप बिंदुओं को परिभाषित कर सकते हैं या गंतव्य-समन्वय संयोजन का उपयोग कर सकते हैं.
कोड उदाहरण
यहाँ एक के लिए एक उदाहरण कोड स्निपेट है ठेठ स्क्रॉल कंटेनर, साथ में ऊर्ध्वाधर दिशा में स्क्रॉलिंग और अंदर कुछ छवियां. यह डेमो आप इस पोस्ट की शुरुआत में पा सकते हैं.
div चौड़ाई: 300px; ऊंचाई: 300 पीएक्स; अतिप्रवाह: ऑटो;… div> img चौड़ाई: 250px; ऊँचाई: 150px;…
अब हम कुछ स्नैप पॉइंट जोड़ें स्क्रॉल कंटेनर में:
div चौड़ाई: 300px; अतिप्रवाह: ऑटो; स्क्रॉल-स्नैप-पॉइंट-वाई: रिपीट (150 पीएक्स); स्क्रॉल-स्नैप-प्रकार: अनिवार्य;
नीचे, आप देख सकते हैं कि आउटपुट कैसा दिखता है सीएसएस तस्वीर अंक जोड़ा गया. जब भी नीचे की छवि केवल आंशिक रूप से दृश्यमान हो, स्क्रॉलिंग रुक जाती है, तो ध्यान दें पूर्ण छवि दिखाई देती है स्क्रॉलपोर्ट के बाद इसके ऊपर एक स्नैपिंग पॉइंट होता है.
