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

बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया

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

बैकग्राउंड

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

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

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

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

'रीफ़्रेश करें' एक आसान जेस्चर है. इसे 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 के बिना हासिल करना मुश्किल होता.