बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया
सीएसएस overscroll-behavior प्रॉपर्टी की मदद से डेवलपर, कॉन्टेंट के सबसे ऊपर या सबसे नीचे पहुंचने पर, ब्राउज़र के डिफ़ॉल्ट ओवरफ़्लो स्क्रोल व्यवहार को बदल सकते हैं. इस्तेमाल के उदाहरणों में, मोबाइल पर पुल-टू-रीफ़्रेश सुविधा को बंद करना, ओवरस्क्रोल ग्लो और रबरबैंडिंग इफ़ेक्ट को हटाना और पेज के मॉडल/ओवरले के नीचे होने पर उसे स्क्रोल होने से रोकना शामिल है.
बैकग्राउंड
सीमाओं को स्क्रोल करें और स्क्रोल चेन को
किसी पेज को देखने के लिए, स्क्रोल करना सबसे बुनियादी तरीकों में से एक है. हालांकि, ब्राउज़र के अजीब डिफ़ॉल्ट तरीके से, कुछ UX पैटर्न को समझना मुश्किल हो सकता है. उदाहरण के तौर पर, एक ऐप्लिकेशन ड्रॉर लें जिसमें बड़ी संख्या में ऐसे आइटम हों जिन्हें स्क्रोल करके उपयोगकर्ता को करना पड़ सकता है. जब वे निचले हिस्से पर पहुंच जाते हैं, तो ओवरफ़्लो कंटेनर स्क्रोल करना बंद कर देता है, क्योंकि उनके पास इस्तेमाल करने के लिए कोई और कॉन्टेंट नहीं होता. दूसरे शब्दों में, उपयोगकर्ता "स्क्रोल करने की सीमा" पर पहुंचता है. लेकिन ध्यान दें कि अगर उपयोगकर्ता स्क्रोल करना जारी रखता है, तो क्या होता है. ड्रॉर के पीछे का कॉन्टेंट स्क्रोल होना शुरू हो जाता है! स्क्रोलिंग को पैरंट कंटेनर कंट्रोल करता है; उदाहरण में मुख्य पेज.
इस सेटिंग को स्क्रोल चेन कहते हैं. यह कॉन्टेंट को स्क्रोल करते समय ब्राउज़र का डिफ़ॉल्ट तरीका होता है. अक्सर डिफ़ॉल्ट विकल्प काफ़ी अच्छा होता है, लेकिन कभी-कभी ऐसा करना ज़रूरी नहीं होता या फिर इसकी उम्मीद भी नहीं होती. जब उपयोगकर्ता स्क्रोल की सीमा पर जाता है, तो हो सकता है कि कुछ ऐप्लिकेशन अलग उपयोगकर्ता अनुभव देना चाहें.
पुल-टू-रीफ़्रेश इफ़ेक्ट
पुल-टू-रीफ़्रेश एक आसान जेस्चर है, जिसे Facebook और Twitter जैसे मोबाइल ऐप्लिकेशन पसंद करते हैं. सोशल मीडिया फ़ीड लॉन्च करने और रिलीज़ करने से, हाल ही की पोस्ट लोड होने के लिए नई जगह बन जाती है. असल में, यह खास UX इतना लोकप्रिय हो गया है कि Android पर Chrome जैसे मोबाइल ब्राउज़र में भी यही असर लागू हो गया है. पेज पर सबसे ऊपर नीचे स्वाइप करने से पूरा पेज रीफ़्रेश हो जाता है:
जब PWA में किसी फ़ीड को रीफ़्रेश किया जाता है.
, पूरे पेज को रीफ़्रेश करती है.
Twitter PWA जैसी स्थितियों के लिए, नेटिव पुल-टू-रीफ़्रेश कार्रवाई को बंद करना सही रहेगा. ऐसा क्यों हो रहा है? इस ऐप्लिकेशन में, आप शायद यह नहीं चाहेंगे कि उपयोगकर्ता गलती से पेज को रीफ़्रेश न करे. डबल रीफ़्रेश ऐनिमेशन भी दिख सकता है! इसके अलावा, ब्राउज़र की कार्रवाई को पसंद के मुताबिक बनाना बेहतर हो सकता है. ऐसा करके, इसे साइट की ब्रैंडिंग के साथ अलाइन किया जा सकता है. अफ़सोस की बात यह है कि इस तरह की पसंद के मुताबिक बदलाव
करना मुश्किल था. डेवलपर ग़ैर-ज़रूरी JavaScript लिख देते हैं,
नॉन-पैसिव
टच लिसनर (जो स्क्रोलिंग ब्लॉक करते हैं) जोड़ देते हैं या पूरे पेज को 100vw/vh
<div> में चिपका देते हैं (पेज को ओवरफ़्लो होने से रोकने के लिए). इन समाधानों के पास
अच्छी तरह से बताया गया है कि स्क्रोल करने की परफ़ॉर्मेंस पर बुरा असर पड़ता है.
हम बेहतर कर सकते हैं!
पेश है overscroll-behavior
overscroll-behavior प्रॉपर्टी, सीएसएस की एक नई सुविधा है. इससे यह कंट्रोल किया जाता है कि किसी कंटेनर (इसमें पेज भी शामिल है) को ओवर-स्क्रोल करने पर क्या होता है. इसका इस्तेमाल, स्क्रोल चेन को रद्द करने, पुल-टू-रीफ़्रेश कार्रवाई को बंद/पसंद के मुताबिक करने, iOS पर रबरबैंडिंग के इफ़ेक्ट को बंद करने (जब Safari overscroll-behavior को लागू करने पर) वगैरह के लिए किया जा सकता है.
सबसे अच्छी बात यह है कि overscroll-behavior का इस्तेमाल करने से, पेज की परफ़ॉर्मेंस पर कोई बुरा असर नहीं पड़ता, जैसा कि शुरुआती जानकारी में बताया गया है!
प्रॉपर्टी तीन संभावित वैल्यू का इस्तेमाल करती है:
- auto - डिफ़ॉल्ट. एलिमेंट पर शुरू होने वाले स्क्रोल, पहले के एलिमेंट तक लागू हो सकते हैं.
- contain - स्क्रोल चेन को रोकता है. स्क्रोल करने से पूर्वजों तक स्क्रोल नहीं होता है, लेकिन
नोड के अंदर के लोकल इफ़ेक्ट दिखाए जाते हैं. उदाहरण के लिए, Android पर ओवरस्क्रोल ग्लो
का असर या iOS पर रबरबैंडिंग इफ़ेक्ट, जो स्क्रोल सीमा पर पहुंचने पर उपयोगकर्ता को
सूचना देता है. ध्यान दें:
htmlएलिमेंट परoverscroll-behavior: containका इस्तेमाल करने पर, ओवरस्क्रोल की जाने वाली नेविगेशन कार्रवाइयों को रोका जा सकता है. - none -
containकी तरह है, लेकिन यह नोड में ही ओवरस्क्रोल इफ़ेक्ट को रोकता है (उदाहरण के लिए, Android ओवरस्क्रोल ग्लो या iOS रबरबैंडिंग).
चलिए, overscroll-behavior इस्तेमाल करने का तरीका जानने के लिए कुछ उदाहरण देखते हैं.
किसी फ़िक्स्ड पोज़िशन एलिमेंट से स्क्रोल करने से बचें
चैटबॉक्स की स्थिति
पेज के निचले हिस्से में, एक तय चैटबॉक्स रखें. इसका मकसद चैट बॉक्स को अपने हिसाब से बनाना चाहिए और यह उसके पीछे के कॉन्टेंट से अलग स्क्रोल हो. हालांकि, स्क्रोल चेन की वजह से, जैसे ही उपयोगकर्ता चैट इतिहास में आखिरी मैसेज पर पहुंचता है, दस्तावेज़ स्क्रोल होना शुरू हो जाता है.
इस ऐप्लिकेशन के लिए, बेहतर होगा कि चैटबॉक्स में आने वाले स्क्रोल चैट में ही रहें. चैट मैसेज वाले एलिमेंट में overscroll-behavior: contain को जोड़कर, ऐसा किया जा सकता है:
#chat .msgs {
overflow: auto;
overscroll-behavior: contain;
height: 300px;
}
इसका मतलब है कि हम चैटबॉक्स के स्क्रोल करने वाले कॉन्टेक्स्ट और मुख्य पेज को अलग-अलग कर रहे हैं. आखिरी नतीजा यह होता है कि जब उपयोगकर्ता चैट इतिहास में ऊपर/नीचे पहुंचता है, तब मुख्य पेज बना रहता है. चैटबॉक्स में शुरू होने वाले स्क्रोल, अपने-आप नहीं दिखते.
पेज ओवरले की स्थिति
"अंडरस्क्रोल" की स्थिति का एक और रूप यह है कि आपको तय जगह ओवरले के पीछे कॉन्टेंट स्क्रोल करते हुए दिखता है. मुफ़्त में इनाम
overscroll-behavior क्रम में है! ब्राउज़र मददगार होने की कोशिश करता है, लेकिन
ऐसा करने पर साइट खराब दिखती है.
उदाहरण - overscroll-behavior: contain के साथ और उसके बिना मॉडल:
पुल-टू-रीफ़्रेश करने की सुविधा बंद करना
पुल-टू-रीफ़्रेश कार्रवाई को बंद करना, सीएसएस की एक लाइन है. बस व्यूपोर्ट तय करने वाले पूरे एलिमेंट पर
स्क्रोल चेन बनाने से रोकें. ज़्यादातर मामलों में, यह
<html> या <body> होता है:
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
इस आसान तरीके से, हम चैटबॉक्स डेमो में, डबल पुल-टू-रीफ़्रेश ऐनिमेशन की समस्याओं को ठीक करते हैं. इसके बजाय, हम ऐसा कस्टम इफ़ेक्ट लागू कर सकते हैं जिसमें नट लोड होने वाले ऐनिमेशन का इस्तेमाल किया जाता है. जैसे-जैसे इनबॉक्स रीफ़्रेश होता है, पूरा इनबॉक्स भी धुंधला हो जाता है:
यहां पूरे कोड का स्निपेट दिया गया है:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
ओवरस्क्रोल ग्लो और रबरबैंडिंग इफ़ेक्ट बंद किए जा रहे हैं
स्क्रोल सीमा पर जाते समय बाउंस इफ़ेक्ट को बंद करने के लिए, overscroll-behavior-y: none का इस्तेमाल करें:
body {
/* Disables pull-to-refresh and overscroll glow effect.
Still keeps swipe navigations. */
overscroll-behavior-y: none;
}
पूरा डेमो
इन सबको एक साथ रखकर, पूरे
चैटबॉक्स डेमो में
overscroll-behavior का इस्तेमाल करके पसंद के मुताबिक पुल-टू-रीफ़्रेश ऐनिमेशन बनाया जाता है
और चैटबॉक्स विजेट से स्क्रोल को रोका जाता है. इससे उपयोगकर्ता को सबसे बेहतर अनुभव मिलता है, जिसे सीएसएस overscroll-behavior के बिना हासिल करना मुश्किल होता.