लेआउट में बदलाव करने के बाद स्नैप करना स्क्रोल करें

Chrome 81 और इसके बाद के वर्शन में, अब आपको ज़बरदस्ती इवेंट लिसनर जोड़ने की ज़रूरत नहीं पड़ेगी झपकी लेती हैं.

Adam Argyle
Kaan Alsan
Kaan Alsan
Yi Gu

सीएसएस स्क्रोल स्नैप इसकी मदद से वेब डेवलपर, स्नैप करने की पोज़िशन पर स्क्रोल करें. मौजूदा लागू होने की एक कमी यह है कि लेआउट में बदलाव होने पर, स्क्रोल स्नैप करना ठीक से काम नहीं करता, जैसे जब व्यूपोर्ट का आकार बदला जाता है या डिवाइस घुमाया जाता है. इस समस्या को Chrome 81 में ठीक कर दिया गया है.

इंटरोऑपरेबिलिटी

कई ब्राउज़र में, CSS Scroll Snap के लिए बुनियादी सहायता उपलब्ध होती है. ज़्यादा जानकारी के लिए, क्या सीएसएस का इस्तेमाल किया जा सकता है ज़्यादा जानकारी के लिए, Snap? पर स्क्रोल करें.

फ़िलहाल, लेआउट के बाद स्क्रोल स्नैप करने की सुविधा लागू करने वाला ब्राउज़र सिर्फ़ Chrome है बदलाव. Firefox में इसके लिए टिकट खोलें लागू करने के साथ-साथ Safari में भी 24 घंटे के बाद री-स्नैप करने के लिए टिकट का कॉन्टेंट बदल जाता है. फ़िलहाल, इस व्यवहार को सिम्युलेट करने के लिए, स्नैप करने की सुविधा चालू करने के लिए, इवेंट लिसनर के लिए नीचे दिया गया कोड: javascript scroller.scrollBy(0,0); अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है हालांकि, इससे इस बात की गारंटी नहीं मिलती कि स्क्रोलर उसी डेटा पर वापस आ जाएगा एलिमेंट.

बैकग्राउंड

सीएसएस स्क्रोलिंग स्नैप

CSS Scroll Snap सुविधा की सहायता से वेब डेवलपर अच्छी तरह से नियंत्रित स्नैप स्नैप करने की स्थिति तय करके अनुभव को स्क्रोल करें. ये स्थितियां पक्का करें कि स्क्रोल किया जा सकने वाला कॉन्टेंट, अपने कंटेनर के साथ सही तरीके से अलाइन है हमने सटीक स्क्रोलिंग की समस्याओं को हल किया है. दूसरे शब्दों में, स्नैप करने के लिए स्क्रोल करें:

  • स्क्रोल करते समय अजीब स्क्रोल पोज़िशन को रोकता है.
  • कॉन्टेंट को अलग-अलग पेजों में दिखाने की सुविधा लागू करता है.

आम तौर पर, स्क्रोल करने के लिए पेज पर नंबर वाले लेख और इमेज कैरसेल का इस्तेमाल किया जाता है स्नैप.

सीएसएस स्क्रोल स्नैप का उदाहरण.
सीएसएस स्क्रोल स्नैप का उदाहरण. आखिर में इमेज के हॉरिज़ॉन्टल सेंटर को स्क्रोल करने पर वह हॉरिज़ॉन्टल सेंटर वाली अलाइन होती है रखा जा सकता है.

कमियां

विंडो का साइज़ बदलते समय, स्नैप करने की पोज़िशन मिट जाती है.

स्क्रोल स्नैप करने की सुविधा से उपयोगकर्ता कॉन्टेंट पर आसानी से नेविगेट कर सकते हैं, लेकिन कॉन्टेंट और लेआउट में होने वाले बदलावों के हिसाब से खुद को ढाल न पाना फ़ायदे. जैसा कि उदाहरण में बताया गया है ऊपर दिया गया है, तो उपयोगकर्ताओं को किसी विंडो का साइज़ बदलते समय, स्क्रोल की पोज़िशन में अपने हिसाब से बदलाव करना होगा. पहले स्नैप किए गए तत्व को ढूंढें. लेआउट की समस्या पैदा करने वाली कुछ आम स्थितियों की वजह से बदलाव हैं:

  • विंडो का साइज़ बदलना
  • डिवाइस को घुमाना
  • DevTools खोला जा रहा है

पहले दो स्थितियां, सीएसएस स्क्रोलिंग स्नैप को लोगों के लिए कम दिलचस्प बनाती हैं और तीसरा विकल्प, डीबग करते समय डेवलपर के लिए एक बुरा सपना होता है. डेवलपर को ये काम भी करने होंगे इन कमियों पर विचार करने के लिए, कॉन्टेंट जोड़ने, हटाने या उसे दूसरी जगह ले जाने जैसी कार्रवाइयों की सुविधा देता हो.

इसे ठीक करने का एक सामान्य हल यह है कि वे श्रोताओं को जोड़ें जो प्रोग्रामैटिक स्क्रोल को एक्ज़ीक्यूट करते हैं जब भी इनमें से कोई भी लेआउट हो, तो स्नैपिंग को ज़बरदस्ती लागू करने के लिए JavaScript बदलाव होते हैं. यह समाधान तब कामयाब नहीं हो सकता, जब उपयोगकर्ता स्क्रोलर का इस्तेमाल करें. आगे के हैंडलिंग के लिए, ऐसा लगता है कि JavaScript इस सीएसएस सुविधा के मकसद को करीब-करीब खत्म कर चुका है.

Chrome 81 में लेआउट बदलने के बाद फिर से स्नैप करने की सुविधा पहले से मौजूद है

Chrome 81 में अब बताई गई कमियां मौजूद नहीं हैं: स्क्रोलर मौजूद रहेंगे स्नैप किया जा सकता है. इसके बाद, वे स्क्रोल की पोज़िशन की फिर से समीक्षा करेंगे अपना लेआउट बदल रहे हैं, और यदि आवश्यक हो तो निकटतम स्नैप स्थिति पर पुनः-स्नैप करें. अगर आपने स्क्रोलर को पहले किसी ऐसे एलिमेंट पर स्नैप किया गया था जो तो स्क्रोलर उस पर वापस स्नैप करने की कोशिश करेगा. इन बातों पर ध्यान दें जब नीचे दी गई जानकारी में लेआउट बदलता है, तो क्या होता है उदाहरण के लिए.

स्नैप स्थिति खो गई
किसी डिवाइस को घुमाने से, Chrome 80 में स्नैप पोज़िशन नहीं. इसके बाद, उस स्लाइड पर स्क्रोल करें जिसमें NOPE लिखा है. इसके बाद, डिवाइस की स्क्रीन की दिशा बदलें पोर्ट्रेट से लैंडस्केप तक, एक खाली स्क्रीन दिखती है. इसका मतलब है कि स्क्रोल स्नैप स्थिति खो गई थी.
स्नैप स्थिति संरक्षित
किसी डिवाइस को घुमाने से, Chrome 81 में स्नैप पोज़िशन सुरक्षित होती है. वह स्लाइड जो का कहना है कि NOPE व्यू में बना रहता है, भले ही डिवाइस का ओरिएंटेशन कई बार बदलता है.

लेआउट में बदलाव होने के बाद फिर से स्नैप करना देखें ज़्यादा जानकारी के लिए, खास जानकारी विवरण.

उदाहरण: स्टिकी स्क्रोलबार

"लेआउट में बदलाव होने के बाद स्नैप करें" सुविधा की मदद से, डेवलपर स्टिकी स्क्रोलबार लागू कर सकते हैं. CSS की पंक्तियां:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

क्या आपको ज़्यादा जानकारी चाहिए? नीचे दी गई डेमो चैट देखें यूज़र इंटरफ़ेस (यूआई) की इमेज.

नया मैसेज जोड़ने पर, फिर से स्नैप किया जाता है. इससे मैसेज, मैसेज के सबसे निचले हिस्से पर बना रहता है Chrome 81.

आने वाला काम

री-स्नैपिंग स्क्रोलिंग के सभी इफ़ेक्ट, फ़िलहाल तुरंत उपलब्ध हैं; संभावित तौर पर, फिर से स्नैप करने की सुविधा के लिए, स्मूद स्क्रोलिंग की मदद लें इफ़ेक्ट शामिल करें. खास जानकारी से जुड़ी समस्या देखें देखें.

सुझाव/राय दें या शिकायत करें

लेआउट में बदलाव होने के बाद फिर से स्नैप करने की सुविधा के लिए, आपका सुझाव बहुत ज़रूरी है. इसलिए, आगे बढ़ें इसे आज़माकर देखें और Chromium के इंजीनियर को जानें कि सोचें.