आपको और आपके उपयोगकर्ताओं को ऐसे मोबाइल वेब ऐप्लिकेशन चाहिए जो प्रतिक्रिया देने के साथ-साथ टच. उन्हें डेवलप करना आसान होना चाहिए, लेकिन हमें अफ़सोस है कि मोबाइल वेब स्क्रोलिंग के दौरान टच इवेंट पर प्रतिक्रिया देने के लिए, ब्राउज़र को लागू करने के विकल्प के तौर पर ही रखा जाता है TouchEvent में दी गई जानकारी देखें. जैसे नतीजतन, तरीकों को करीब-करीब चार कैटगरी में बांटा जा सकता है. यह स्थिति की वजह से, स्क्रोल को एक जैसा बनाए रखने और डेवलपर के कंट्रोल बनाए रखने के लिए.
टच इवेंट प्रोसेसिंग के चार अलग-अलग मॉडल?
अलग-अलग ब्राउज़र के व्यवहार में अंतर चार मॉडल में बंटा होता है.
सामान्य सिंक्रोनस इवेंट प्रोसेसिंग
टचमूव इवेंट, स्क्रोल करने के दौरान भेजे जाते हैं. साथ ही, हर स्क्रोल अपडेट ब्लॉक को तब तक भेजा जाता है, जब तक टचमूव हैंडलिंग पूरी नहीं हो जाती. यह समझने में आसान है और स्क्रोल परफ़ॉर्मेंस के लिए सबसे असरदार है, लेकिन यह स्क्रोल की परफ़ॉर्मेंस के लिए खराब है. इसका मतलब है कि स्क्रोल के दौरान हर फ़्रेम, मुख्य थ्रेड पर ब्लॉक होना चाहिए.
ब्राउज़र: Android ब्राउज़र (Android 4.0.4, 4.3), मोबाइल Safari (div स्क्रोल करते समय)
एसिंक्रोनस टचमूव प्रोसेसिंग
टचमूव इवेंट, स्क्रोल करने के दौरान भेजे जाते हैं. हालांकि, स्क्रोल करने का काम एसिंक्रोनस रूप से हो सकता है (स्क्रोल शुरू होने के बाद, टचमूव इवेंट को अनदेखा कर दिया जाता है). इसका नतीजा यह हो सकता है कि "दो बार हैंडलिंग" दिखे इवेंट की जानकारी देने के लिए किया जा सकता है. उदाहरण के लिए, वेबसाइट के होने के बाद भी स्क्रोल करना जारी रखना. साथ ही, इवेंट पर preventDefault को कॉल करने और ब्राउज़र को निर्देश देने के लिए कहा जाता है कि वह इसे हैंडल न करे.
ब्राउज़र: मोबाइल Safari (दस्तावेज़ स्क्रोल करते समय), Firefox
स्क्रोल करते समय टचमूव को दबा दिया जाता है
स्क्रोलिंग शुरू होने के बाद, Touchmove इवेंट नहीं भेजे जाते और न ही टचपॉइंट, इवेंट के खत्म होने तक फिर से शुरू होते हैं. इस मॉडल में, स्टेशनरी टच और स्क्रोल के बीच का अंतर बताना मुश्किल है.
ब्राउज़र: Samsung ब्राउज़र (mousemove इवेंट भेजे गए)
स्क्रोल शुरू करने पर टच रद्द करें
आपके पास दोनों तरीकों का इस्तेमाल नहीं किया जा सकता, जैसे- स्क्रोल आसानी से स्क्रोल करना और डेवलपर कंट्रोल. साथ ही, यह मॉडल आसानी से स्क्रोल करने और इवेंट मैनेज करने के बीच के तालमेल को साफ़ तौर पर बताता है, जैसा कि पॉइंटर इवेंट स्पेसिफ़िकेशन में दिए गए सिमैंटिक की तरह किया गया है. कुछ ऐसे प्रयोग संभव नहीं होते हैं, जिनके लिए उंगली को ट्रैक करने की ज़रूरत हो, जैसे कि पुल-टू-रीफ़्रेश करना.
ब्राउज़र: Chrome डेस्कटॉप M32+, Chrome Android
बदलाव क्यों करें?
फ़िलहाल, Android के लिए Chrome में Chrome के पुराने मॉडल का इस्तेमाल किया जा रहा है: स्क्रोल करने पर touchcancel शुरू करते हैं, जो स्क्रोलिंग की परफ़ॉर्मेंस को बढ़ाता है. हालांकि, इससे डेवलपर के लिए भ्रम की स्थिति पैदा हो जाती है. खास तौर पर, कुछ डेवलपर को टच रद्द इवेंट या साथ ही, कुछ वेबसाइटों पर रोक लगाई गई है. इससे भी अहम बात यह है कि यूज़र इंटरफ़ेस (यूआई) स्क्रोलिंग इफ़ेक्ट और व्यवहार की पूरी क्लास, जैसे कि पुल-टू-रीफ़्रेश, छिपाने वाले बार और स्नैप पॉइंट को लागू करना मुश्किल या नामुमकिन है करते हैं.
इन इफ़ेक्ट का समर्थन करने के लिए खास तौर पर हार्डकोड की गई सुविधाएं जोड़ने के बजाय, Chrome का मकसद ऐसे प्लैटफ़ॉर्म प्रिमिटिव जोड़ना है जिनसे डेवलपर को इन्हें सीधे तौर पर लागू किया जा सकता है. रेशनल वेब प्लैटफ़ॉर्म देखें सामान्य प्रदर्शनी के लिए किया जा सकता है.
Chrome का नया मॉडल: थ्रॉटल किया गया एसिंक्रोनस टचमूव मॉडल
Chrome पेश कर रहा है एक नई सुविधा
इसे अन्य ब्राउज़र के लिए लिखे गए कोड के साथ संगतता सुधारने के लिए डिज़ाइन किया गया है
पर जाएं.
इवेंट को स्क्राेल करें. यह सुविधा डिफ़ॉल्ट रूप से चालू होती है और आपके पास इसे चालू करने का विकल्प होता है
निम्न फ़्लैग, chrome://flags\#touch-scrolling-mode के साथ बंद करें.
नई सुविधा में:
- पहला टचमूव सिंक्रोनसली भेजा जाता है, ताकि स्क्रोल करके रद्द किया गया
- ऐक्टिव स्क्रोलिंग के दौरान
- टचमूव इवेंट एसिंक्रोनस तरीके से भेजे जाते हैं
- हर 200 मि॰से॰ में एक इवेंट तक थ्रॉटल किया गया या अगर सीएसएस 15 पिक्सल वाला स्लोप एरिया है सीमा पार हो गई है
- Event.cancelable पर जाएं गलत
- अगर ऐसा नहीं होता है, तो ऐक्टिव स्क्रोल करने पर, टचस्क्रीन वाले इवेंट सिंक्रोनस (एक ही समय पर) सामान्य तरीके से ट्रिगर होते हैं स्क्रोल करना बंद हो जाता है या हो नहीं सकता, क्योंकि स्क्रोल करने की सीमा पूरी हो गई है
- टचएंड इवेंट हमेशा तब होता है, जब उपयोगकर्ता अपनी उंगली हटाता है
Android के लिए Chrome में इस डेमो को आज़माया जा सकता है और
अंतर देखने के लिए chrome://flags\#touch-scrolling-mode फ़्लैग करें.
हमें आपकी राय का इंतज़ार है
Async Touchmove मॉडल में क्रॉस-ब्राउज़र को बेहतर बनाने की क्षमता है साथ काम करने के लिए बनाया गया है और टच जेस्चर इफ़ेक्ट की एक नई क्लास को चालू किया जा सकता है. हमें दिलचस्पी है डेवलपर की राय को सुनने और उन क्रिएटिव कामों को देखने में, जो डेवलपर उसके साथ.