अपने स्क्रोल को कंट्रोल करें - पुल-टू-रीफ़्रेश और ओवरफ़्लो इफ़ेक्ट को पसंद के मुताबिक बनाएं

कम शब्दों में कहा जाए तो

सीएसएस overscroll-behavior प्रॉपर्टी की मदद से, डेवलपर कॉन्टेंट के सबसे ऊपर/नीचे पहुंचने पर, ब्राउज़र के डिफ़ॉल्ट ओवरफ़्लो स्क्रोल व्यवहार को बदल सकते हैं. इस्तेमाल के उदाहरणों में, मोबाइल पर 'खींचकर रीफ़्रेश करें' सुविधा को बंद करना, ओवरस्क्रोल ग्लो और रबरबैंडिंग इफ़ेक्ट हटाना, और पेज के कॉन्टेंट को स्क्रोल होने से रोकना शामिल है. ऐसा तब किया जाता है, जब कॉन्टेंट किसी मॉडल/ओवरले के नीचे हो.

बैकग्राउंड

स्क्रोल की सीमाएं और स्क्रोल चेन

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

यह पता चला है कि इस व्यवहार को स्क्रोल चेनिंग कहा जाता है. यह कॉन्टेंट को स्क्रोल करते समय, ब्राउज़र का डिफ़ॉल्ट व्यवहार होता है. कई बार डिफ़ॉल्ट विकल्प काफ़ी अच्छा होता है, लेकिन कभी-कभी ऐसा कुछ भी नहीं किया जा सकता जिसके बारे में आपको कुछ पता न हो. ऐसा हो सकता है कि जब उपयोगकर्ता स्क्रोल की सीमा तक पहुंच जाएं, तब कुछ ऐप्लिकेशन एक अलग उपयोगकर्ता अनुभव देना चाहें.

'खींचकर रीफ़्रेश करें' इफ़ेक्ट

'रीफ़्रेश करें' को रीफ़्रेश करने के लिए एक आसान जेस्चर (हाव-भाव) को रीफ़्रेश करना एक आसान जेस्चर है. इसे Facebook और Twitter जैसे मोबाइल ऐप्लिकेशन में पसंद किया जाता है. सोशल फ़ीड को नीचे की ओर खींचकर छोड़ने पर, हाल ही की पोस्ट लोड करने के लिए नया स्क्रीन दिखता है. बल्कि, यह खास UX इतना लोकप्रिय हो गया है कि Android पर Chrome जैसे मोबाइल ब्राउज़र में भी यही असर हो गया है. पेज पर सबसे ऊपर से नीचे की ओर स्वाइप करने से, पूरा पेज रीफ़्रेश हो जाता है:

Twitter PWA जैसी स्थितियों के लिए, नेटिव पुल-टू-रीफ़्रेश कार्रवाई को बंद करना सही रह सकता है. क्यों? इस ऐप्लिकेशन में, शायद आप उपयोगकर्ता को गलती से पेज रीफ़्रेश करने से रोकना चाहें. इसके अलावा, आपको दो बार रीफ़्रेश होने का ऐनिमेशन भी दिख सकता है! इसके अलावा, ब्राउज़र की कार्रवाई को पसंद के मुताबिक बनाना बेहतर हो सकता है. इसके लिए, उसे साइट की ब्रैंडिंग के हिसाब से अलाइन करें. समस्या यह है कि इस तरह के कस्टमाइज़ेशन को लागू करना मुश्किल है. डेवलपर, ज़रूरत के मुताबिक JavaScript लिखते हैं, नॉन-पैसिव टच लिसनर जोड़ते हैं (जो स्क्रोलिंग को ब्लॉक करते हैं) या पूरे पेज को 100vw/vh<div> में चिपकाते हैं (ताकि पेज ओवरफ़्लो न हो). इन तरीकों का इस्तेमाल करने के कई पुख्ता सबूत मौजूद हैं. इनसे स्क्रोल करने की परफ़ॉर्मेंस पर बुरा असर पड़ता है.

हम बेहतर कर सकते हैं!

पेश है overscroll-behavior

overscroll-behavior प्रॉपर्टी, सीएसएस की एक नई सुविधा है. यह यह कंट्रोल करती है कि किसी कंटेनर (इसमें पेज भी शामिल है) को ओवर-स्क्रोल करने पर क्या होता है. इसका इस्तेमाल, स्क्रोल चेनिंग को रद्द करने, खींचकर रीफ़्रेश करने की सुविधा को बंद करने या पसंद के मुताबिक बनाने, iOS पर रबरबैंडिंग इफ़ेक्ट को बंद करने (जब Safari overscroll-behavior लागू करता है) वगैरह के लिए किया जा सकता है. सबसे अच्छी बात यह है कि overscroll-behavior का इस्तेमाल करने से पेज की परफ़ॉर्मेंस पर बुरा असर नहीं पड़ता, जैसे कि पहले में बताए गए हैक की तरह!

प्रॉपर्टी में तीन संभावित वैल्यू हो सकती हैं:

1. auto - डिफ़ॉल्ट. एलिमेंट पर शुरू होने वाले स्क्रोल, पैरंट एलिमेंट पर भी दिख सकते हैं.
2. contain - स्क्रोल चेनिंग को रोकता है. स्क्रोल, पैरंट नोड पर लागू नहीं होते, लेकिन नोड में स्थानीय इफ़ेक्ट दिखते हैं. उदाहरण के लिए, Android पर ओवरस्क्रोल ग्लो इफ़ेक्ट या iOS पर रबरबैंडिंग इफ़ेक्ट, जो उपयोगकर्ता को स्क्रीन के किनारे तक पहुंचने पर सूचना देता है. ध्यान दें: html एलिमेंट पर overscroll-behavior: contain का इस्तेमाल करने से, ओवरस्क्रोल नेविगेशन ऐक्शन को रोका जा सकता है.
3. 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 के बिना ऐसा करना मुश्किल होता.