कम शब्दों में कहा जाए तो
सीएसएस overscroll-behavior प्रॉपर्टी की मदद से डेवलपर,
ब्राउज़र के डिफ़ॉल्ट ओवरफ़्लो स्क्रोल व्यवहार पर
कॉन्टेंट. इस्तेमाल के उदाहरणों में, पुल-टू-रीफ़्रेश को बंद करना शामिल है
इस सुविधा के ज़रिए, ओवरस्क्रोल की चमक और रबरबैंडिंग इफ़ेक्ट को हटाया जा सकता है.
साथ ही, जब यह मोडल/ओवरले के नीचे हो, तो कॉन्टेंट को स्क्रोल होने से रोका जा सकता है.
बैकग्राउंड
सीमाएं स्क्रोल करें और चेन को स्क्रोल करें
स्क्रोल करना किसी पेज के साथ इंटरैक्ट करने का सबसे ज़रूरी तरीका है, लेकिन कुछ UX पैटर्न समझने में मुश्किल हो सकते हैं, क्योंकि ब्राउज़र की यह सुविधा आसान होती है डिफ़ॉल्ट व्यवहार. उदाहरण के लिए, ऐसा ऐप्लिकेशन ड्रॉर लें जिसमें बड़ी संख्या में ऐसे आइटम जिन्हें उपयोगकर्ता को स्क्रोल करना पड़ सकता है. जब वे सबसे नीचे पहुंच जाते हैं, ओवरफ़्लो कंटेनर स्क्रोल करना बंद कर देता है, क्योंकि इस्तेमाल करने के लिए और कोई कॉन्टेंट मौजूद नहीं है. दूसरे शब्दों में, उपयोगकर्ता "स्क्रोल सीमा" तक पहुँच जाता है. लेकिन ध्यान दें कि क्या होता है जब उपयोगकर्ता विज्ञापन पर क्लिक करके स्क्रोल करें. ड्रॉर के पीछे का कॉन्टेंट स्क्रोल करना शुरू कर देता है! स्क्रॉल करना है पैरंट कंटेनर ने कब्ज़ा कर लिया है; मुख्य पेज पर क्लिक करें.
ऐसा करने से यह व्यवहार स्क्रोल चेनिंग कहा जाता है; ब्राउज़र का डिफ़ॉल्ट कॉन्टेंट स्क्रोल करते समय क्या होता है. अक्सर डिफ़ॉल्ट विकल्प काफ़ी अच्छा होता है, लेकिन कभी-कभी ऐसा करना उम्मीद के मुताबिक या अचानक नहीं होता है. ऐसा हो सकता है कि कुछ ऐप्लिकेशन जब उपयोगकर्ता स्क्रोल की सीमा तक पहुंच जाता है, तब उसे एक अलग उपयोगकर्ता अनुभव मिलता है.
पुल-टू-रीफ़्रेश प्रभाव
पुल-टू-रीफ़्रेश करने का एक आसान जेस्चर (हाव-भाव) है. इसे ऐसे मोबाइल ऐप्लिकेशन पसंद करते हैं, जैसे कि Facebook और Twitter. सोशल फ़ीड पर शेयर करने और कॉन्टेंट रिलीज़ करने से, दर्शकों की दिलचस्पी बढ़ती है और नई पोस्ट लोड करने के लिए जगह. असल में, इस उपयोगकर्ता अनुभव में है इतना लोकप्रिय हो गया है कि Android पर Chrome जैसे मोबाइल ब्राउज़र ने एक जैसा प्रभाव. पेज के सबसे ऊपर नीचे की ओर स्वाइप करने से, पूरा पेज रीफ़्रेश हो जाता है:
मैनेज कर सकता है.
पूरी सामग्री को रीफ़्रेश करती है करें.
Twitter के PWA जैसे मामलों के लिए,
नेटिव पुल-टू-रीफ़्रेश कार्रवाई को बंद करना सही रहेगा. क्यों? इसमें
तो आप शायद यह भी न चाहें कि उपयोगकर्ता गलती से पेज को रीफ़्रेश कर दे. यहां कई
इसमें डबल रीफ़्रेश ऐनिमेशन भी दिख सकता है! वैकल्पिक रूप से, यह हो सकता है
ब्राउज़र की कार्रवाई को कस्टमाइज़ करना आसान होगा.
ब्रैंडिंग. अफ़सोस की बात यह है कि इस तरह की पसंद के मुताबिक बदलाव करने की सुविधा
मुश्किल हो रहा है. डेवलपर गैर-ज़रूरी JavaScript लिख देते हैं,
नॉन-पैसिव
टच लिसनर (जो स्क्रोलिंग को ब्लॉक करते हैं) या पूरे पेज को 100v/w/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.