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

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

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

बैकग्राउंड

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

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

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

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

पुल-टू-रिफ़्रेश एक आसान जेस्चर है. इसे Facebook और Twitter जैसे मोबाइल ऐप्लिकेशन ने लोकप्रिय बनाया है. सोशल फ़ीड को नीचे की ओर खींचकर छोड़ने पर, हाल ही की पोस्ट लोड करने के लिए नया स्क्रीन दिखता है. असल में, यह यूज़र एक्सपीरियंस इतना लोकप्रिय हो गया है कि 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 के बिना ऐसा करना मुश्किल होता.