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

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

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

बैकग्राउंड

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

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

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

पुल-टू-रीफ़्रेश प्रभाव

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

Twitter के PWA जैसे मामलों के लिए, नेटिव पुल-टू-रीफ़्रेश कार्रवाई को बंद करना सही रहेगा. क्यों? इसमें तो आप शायद यह भी न चाहें कि उपयोगकर्ता गलती से पेज को रीफ़्रेश कर दे. इसके अलावा, आपको दो बार रीफ़्रेश होने का ऐनिमेशन भी दिख सकता है! वैकल्पिक रूप से, यह हो सकता है ब्राउज़र की कार्रवाई को कस्टमाइज़ करना आसान होगा. ब्रैंडिंग. अफ़सोस की बात यह है कि इस तरह की पसंद के मुताबिक बदलाव करने की सुविधा मुश्किल हो रहा है. डेवलपर गैर-ज़रूरी JavaScript लिख देते हैं, नॉन-पैसिव टच लिसनर (जो स्क्रोलिंग को ब्लॉक करते हैं) या पूरे पेज को 100v/w/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.