iOS Safari की रबर-बैंड स्क्रोलिंग के बारे में मैंने छह चीज़ें सीखीं

iOS पर Safari में हालिया स्क्रॉलिंग समस्या ठीक करने के लिए मुझे अपना एक सरल टेस्ट पेज बनाकर इंटरनेट पर मिली सभी जानकारी और उनके विभिन्न कॉम्बिनेशन को लागू करना पड़ा ताकि समस्या हल हो सके।

नीचे इस प्रक्रिया के दौरान मैंने जो पाया उसका संक्षिप्त अवलोकन है।

मेरा टेस्ट पेज

मेरा टेस्ट पेज काफी बेसिक था। इसमें पेज का प्रतिनिधित्व करने के लिए एक स्टैटिक डिव में मॉक डेटा था, साथ ही पेज के ऊपर एक ओवरलेड 'मेन्यू' को दर्शाने वाले एक फिक्स्ड डिव भी था, इस तरह।

इस पेज का पूरा स्रोत कोड इस ब्लॉग पोस्ट के नीचे पाया जा सकता है.

डिफॉल्ट व्यवहार को समझना

सबसे पहले मैंने यह समझने की कोशिश की कि iOS पर Safari का डिफ़ॉल्ट व्यवहार कैसा होता है। सबसे उल्लेखनीय बात यह थी कि जब आप मेन्यू के नीचे तक पूरी तरह स्क्रोल कर लेते, तो पेज के बॉडी में एक 'रबर-बैंड इफेक्ट' दिखता था—Safari में एक हार्ड-कोडेड फीचर।

जब मेन्यू के बिल्कुल शीर्ष तक स्क्रोल किया, तब वही बात हुई।

हालांकि मैंने पहली समस्या जो नोट की थी वह यह थी कि अगर आप लगातार पेज के सबसे ऊपर या सबसे नीचे तक स्क्रोल करते रहते हैं, तो Safari पृष्ठ के बैकग्राउंड और मेन्यू दोनों में रींडरिंग गड़बड़ियाँ दिखाई देने लगती हैं।

मुझे नहीं पता कि क्यों, पर मुझे लगता है कि इसका कुछ नाता रबर-बैंड फीचर से है.

-webkit-overflow-scrolling CSS नियम क्या है और यह क्या करता है

अगला कदम मैंने मेन्यू पर -webkit-overflow-scrolling CSS नियम लागू किया था, जो गति-आधारित स्क्रोलिंग सक्षम करता है।

नीचे दी गई तस्वीर के अनुसार, मेरे द्वारा अपनी उंगली से स्वाइप करने के बाद भी स्क्रॉलिंग जारी रहती है।

लेकिन जब आप बिल्कुल शीर्ष या सबसे नीचे तक स्क्रॉल करते हैं, तब भी एक रबर-बैंड-जैसा प्रभाव जुड़ता है, नीचे दिखाया गया है।

उपयोगकर्ता को रबर-बैंड प्रभाव खत्म होने तक प्रतीक्षा करनी होगी

मेरे परीक्षण के दौरान, मैंने यह भी देखा कि जब रबर-बैंड प्रभाव चल रहा होता है, तब एनीमेशन पूरी तरह खत्म होने तक उपयोगकर्ता किसी अन्य तत्व पर फोकस नहीं कर सकता।

नीचे दिए गए उदाहरण में, मैं पहले बैकग्राउंड पेज को स्क्रोल करता हूँ और फिर जल्दी से मेन्यू को स्क्रोल करने की कोशिश करता हूँ, लेकिन अंततः मैं बैकग्राउंड पेज ही स्क्रोल करता रहता हूँ।

हालांकि अगर मैं प्रभाव खत्म होने तक एक पल रुकूँ, तो मैं मेन्यू को स्क्रोल करना शुरू कर सकता हूँ।

पृष्ठभूमि पेज को स्क्रोल होने से कैसे रोकें

मेरे परीक्षण के दौरान, मैंने यह भी देखा कि जब रबर-बैंड प्रभाव चल रहा होता है, तब उपयोगकर्ता पूरी तरह से एनीमेशन समाप्त होने तक किसी अन्य तत्व पर फोकस नहीं कर सकता।

Stack Overflow के इस उत्तर के आधार पर, आप यह सुनिश्चित कर सकते हैं कि Stack Overflow के disable-scrolling वाले तत्व touchmove घटना के ट्रिगर होने पर अपनी डिफ़ॉल्ट स्क्रोलिंग क्रिया नहीं करते।

document.ontouchmove = function(event) { var isTouchMoveAllowed = true, target = event.target; while (target !== null) { if (target.classList && target.classList.contains('disable-scrolling')) { isTouchMoveAllowed = false; break; } target = target.parentNode; } if (!isTouchMoveAllowed) { event.preventDefault(); } };

फिर पेज डिव पर disable-scrolling क्लास लागू करें:

<div class="page disable-scrolling">

यह इस तरह काम करता है, पर और व्यापक परीक्षण से यह भी पता चलता है कि मेन्यू के बिल्कुल ऊपर या नीचे पहुँचते समय पृष्ठभूमि वाला पेज कभी-कभी अभी भी स्क्रोल कर सकता है।

पृष्ठभूमि वाले पन्ने पर अत्यधिक स्क्रॉलिंग से कैसे रोकें

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

फलस्वरूप, पृष्ठ को स्क्रोल करने से रोका गया है, जिससे रबर-बैंड प्रभाव भी नहीं होता है।

function removeIOSRubberEffect(element) { element.addEventListener("touchstart", function() { var top = element.scrollTop, totalScroll = element.scrollHeight, currentScroll = top + element.offsetHeight; if (top === 0) { element.scrollTop = 1; } else if (currentScroll === totalScroll) { element.scrollTop = top - 1; } }); } removeIOSRubberEffect(document.querySelector(".scrollable"));

यह JavaScript स्निपेट तत्व को कभी भी बिल्कुल ऊपर या बिल्कुल नीचे तक पहुँचने से रोकता है, इसे सिर्फ 1 पिक्सेल दूर रखते हुए।

अगर स्क्रोल स्थिति कभी भी बिल्कुल शीर्ष तक या नीचे तक नहीं पहुँचती, तो ओवरस्क्रोल कभी नहीं हो सकता.

पृष्ठभूमि पन्ने तक अत्यधिक स्क्रोल से कैसे रोकें

अगर आप मेन्यू से रबर-बैंड इफेक्ट हटाना चाहते हैं—या तो सौंदर्य कारणों से, या जैसा कि मेरे मामले में यह अतिरिक्त रेंडरिंग गड़बड़ियों का कारण बना, तो बस -webkit-overflow-scrolling CSS नियम हटा दें।

हालांकि, नीचे जैसा आप देख सकते हैं, आप स्मूद स्क्रोलिंग की गति भी खो देते हैं.

पृष्ठ का पूरा स्रोत कोड

यह पेज का पूरा स्रोत कोड है।

<!-- License MIT, Author Special Agent Squeaky (specialagentsqueaky.com) --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> .page{ font-size: 24px; overflow: scroll; } .menu{ position: fixed; top: 0; bottom: 0; left: 0; width: 80%; background: gray; z-index: 1; font-size: 10px; overflow: scroll; /* uncomment to get smooth momentum scroll, but also a rubber band effect */ /*-webkit-overflow-scrolling: touch;*/ } .menu-item{ padding: 10px; background: darkgray; font-size: 24px; } </style> </head> <body> <div class="menu scrollable"> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> <div class="menu-item">hello world</div> </div> <div class="page disable-scrolling"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <script> document.ontouchmove = function(event) { var isTouchMoveAllowed = true, target = event.target; while (target !== null) { if (target.classList && target.classList.contains('disable-scrolling')) { isTouchMoveAllowed = false; break; } target = target.parentNode; } if (!isTouchMoveAllowed) { event.preventDefault(); } }; function removeIOSRubberEffect(element) { element.addEventListener("touchstart", function() { var top = element.scrollTop, totalScroll = element.scrollHeight, currentScroll = top + element.offsetHeight; if (top === 0) { element.scrollTop = 1; } else if (currentScroll === totalScroll) { element.scrollTop = top - 1; } }); } removeIOSRubberEffect(document.querySelector(".scrollable")); </script> </body> </html>