स्क्रोल प्रोग्रेस इंडिकेटर बनाना

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

इन्हें कैसे लागू करें

स्क्रोल प्रोग्रेस इंडिकेटर बनाने के लिए, आपको दो चीज़ों की ज़रूरत होगी:

1. प्रोग्रेस बार के तौर पर काम करने वाला एलिमेंट. आम तौर पर, यह एलिमेंट position: fixed या position: absolute होता है, ताकि उपयोगकर्ता के स्क्रोल करने पर भी यह दिखता रहे.
2. स्क्रोल पोज़िशन से लिंक किया गया ऐनिमेशन.

ऐसा करने का तरीका यहां बताया गया है:

• सबसे पहले, एक एचटीएमएल एलिमेंट बनाएं, जो आपके प्रोग्रेस बार के तौर पर काम करेगा. इस एलिमेंट को अपनी पसंद के मुताबिक स्टाइल किया जा सकता है.
• इसके बाद, अपनी सीएसएस में @keyframes ऐनिमेशन तय करें, जो प्रोग्रेस बार को स्केल करता है. आम तौर पर, एलिमेंट को scaleX(0) से scaleX(1) तक स्केल किया जाता है.
• आखिर में, इस ऐनिमेशन को अपने प्रोग्रेस बार एलिमेंट पर लागू करें और इसकी animation-timeline को स्क्रोल-टाइमलाइन पर सेट करें. इससे ब्राउज़र को पता चलता है कि ऐनिमेशन की प्रोग्रेस को, सबसे नज़दीकी ऐंसेस्टर स्क्रोलर की स्क्रोल पोज़िशन के आधार पर चलाना है.

कोड का उदाहरण

यह कोड, स्क्रोल करने पर #progress एलिमेंट को बड़ा करता है. इसके लिए, यह scroll() फ़ंक्शन से बनाई गई, बिना नाम वाली scroll-timeline का इस्तेमाल करता है.

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll())) {
    @keyframes grow-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    #progress {
      position: fixed;
      left: 0; top: 0;
      width: 100%; height: 1em;
      background: red;

      transform-origin: 0 50%;
      animation: grow-progress auto linear;
      animation-timeline: scroll();
    }
  }
}

डीओएम में अपनी जगह की वजह से, scroll() फ़ंक्शन block दिशा में अपने सबसे नज़दीकी ऐंसेस्टर स्क्रोलर को ट्रैक करेगा. यहां यह रूट स्क्रोलर है.

<body>
  <!-- MANDATORY: Purely decorative visual scroll progress bars MUST set aria-hidden="true" to remove the empty element from the assistive technology reading tree -->
  <div id="progress" aria-hidden="true"></div>
</body>

यह कोड, स्क्रोल करने पर #progress एलिमेंट को बड़ा करता है. इसके लिए, नाम वाली scroll-timeline का इस्तेमाल किया जाता है. इसे scroll-timeline प्रॉपर्टी से बनाया जाता है.

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll())) {
    @keyframes grow-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    :root {
      scroll-timeline: --tl block;
    }

    #progress {
      position: fixed;
      left: 0; top: 0;
      width: 100%; height: 1em;
      background: red;

      transform-origin: 0 50%;
      animation: grow-progress auto linear;
      animation-timeline: --tl;
    }
  }
}

सबसे सही तरीके

स्क्रोल-ड्रिवन ऐनिमेशन का इस्तेमाल करते समय, कुछ सबसे सही तरीकों को अपनाना ज़रूरी है. इससे यह पक्का किया जा सकता है कि उपयोगकर्ताओं को बेहतर और सुलभ अनुभव मिले:

• ज़रूर शामिल करें: सभी ब्राउज़र, स्क्रोल-ड्रिवन ऐनिमेशन के साथ काम नहीं करते. @supports (animation-timeline: scroll()) का इस्तेमाल करके देखें कि यह सुविधा काम करती है या नहीं. साथ ही, उन ब्राउज़र के लिए फ़ॉलबैक उपलब्ध कराएं जिन पर यह सुविधा काम नहीं करती.
  • फ़ॉलबैक रणनीति के लिए, scroll-timeline-polyfill पैकेज का इस्तेमाल न करें. ऐसा इसलिए, क्योंकि इसमें सभी सुविधाएं मौजूद नहीं हैं और इसमें कई समस्याएं हैं.
  • अगर ऐनिमेशन को सिर्फ़ सजावट के लिए इस्तेमाल किया जा रहा है, तो प्रोग्रेसिव एनहैंसमेंट का विकल्प चुनें और फ़ॉलबैक न दें.
• ज़रूर करें: सहायक टेक्नोलॉजी के रीडिंग फ़्लो से, सिर्फ़ सजावट के लिए इस्तेमाल किए गए एलिमेंट हटाएं: सिर्फ़ विज़ुअल स्क्रोल इंडिकेटर पर aria-hidden="true" लागू करें, ताकि यह पक्का किया जा सके कि स्क्रीन रीडर को खाली और बिना नाम वाले नोड न मिलें.
• उपयोगकर्ता की प्राथमिकताओं का ध्यान रखें: कुछ उपयोगकर्ताओं को वेब पर कम मोशन पसंद होता है. इन उपयोगकर्ताओं के लिए, ऐनिमेशन बंद करने या कम करने के लिए, prefers-reduced-motion मीडिया क्वेरी का इस्तेमाल करें.
• सिर्फ़ अच्छी परफ़ॉर्मेंस वाली सीएसएस प्रॉपर्टी को ऐनिमेट करने की कोशिश करें: सबसे आसान ऐनिमेशन के लिए, ऐसी प्रॉपर्टी को ऐनिमेट करें जिन्हें ब्राउज़र के कंपोज़िटर थ्रेड से मैनेज किया जा सकता है. जैसे, transform और opacity. width या height जैसी अन्य प्रॉपर्टी को ऐनिमेट करने से, परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं.
• DO डिक्लेरेशन के सही क्रम का इस्तेमाल करें: animation शॉर्टहैंड प्रॉपर्टी का इस्तेमाल करते समय, animation-timeline को इसके बाद डिक्लेयर करें. इससे शॉर्टहैंड को टाइमलाइन रीसेट करने से रोका जा सकेगा.

स्क्रोल-ड्रिवन ऐनिमेशन बनाने के लिए, scroll() फ़ंक्शन का इस्तेमाल करते समय:

• ज़रूरी नहीं स्क्रोलर के बारे में साफ़ तौर पर बताएं: अगर सबसे नज़दीकी स्क्रोलर को टारगेट नहीं किया जा रहा है, तो साफ़ तौर पर बताएं कि आपको scroll(root) या scroll(self) के साथ किस स्क्रोलर का इस्तेमाल करना है.
  • जब root, nearest या self काफ़ी न हों, तो नाम वाली scroll-timeline का इस्तेमाल करें.
• ज़रूरी नहीं ट्रैक करने के लिए ऐक्सिस के बारे में साफ़ तौर पर बताएं: डिफ़ॉल्ट block ऐक्सिस को टारगेट न करने पर (जैसे कि हॉरिज़ॉन्टल स्क्रोलर में), साफ़ तौर पर बताएं कि किस ऐक्सिस को scroll(block) या scroll(inline) के साथ ट्रैक करना है.

स्क्रोल-ड्रिवन ऐनिमेशन बनाने के लिए, scroll-timeline प्रॉपर्टी का इस्तेमाल करते समय:

• नाम के लिए, सीएसएस <dashed-ident> का इस्तेमाल करें.
• ज़रूरी नहीं ट्रैक करने के लिए ऐक्सिस के बारे में साफ़ तौर पर बताएं: डिफ़ॉल्ट block ऐक्सिस को टारगेट न करने पर (जैसे, हॉरिज़ॉन्टल स्क्रोलर में), साफ़ तौर पर बताएं कि scroll-timeline-axis के साथ किस ऐक्सिस को ट्रैक करना है.
• ज़रूर करें: पक्का करें कि लुकअप का स्कोप काम करता हो. जब scroll-timeline का एलान करने वाला एलिमेंट, ऐनिमेशन वाले एलिमेंट का फ़्लैट ट्री ऐंसेस्टर न हो, तो शेयर किए गए ऐंसेस्टर पर timeline-scope का इस्तेमाल करके, scroll-timeline के नाम की विज़िबिलिटी को बढ़ाएं.

फ़ॉलबैक रणनीतियां

स्क्रोल-ड्रिवन ऐनिमेशन की सुविधा काम न करने वाले ब्राउज़र के लिए, फ़ॉलबैक का इस्तेमाल करके विज़ुअल इफ़ेक्ट फिर से बनाए जा सकते हैं. फ़ॉलबैक आम तौर पर, स्क्रोल लिसनर (ScrollTimeline इफ़ेक्ट के लिए) या IntersectionObserver API (ViewTimeline इफ़ेक्ट के लिए) की मदद से बनाए जाते हैं.

जिन ब्राउज़र में स्क्रोल-ड्रिवन ऐनिमेशन की सुविधा पहले से मौजूद होती है उनमें हमेशा नेटिव सीएसएस का इस्तेमाल करें. ऐसा इसलिए, क्योंकि वे ज़्यादा बेहतर तरीके से काम करते हैं.

ध्यान दें कि फ़ॉलबैक तरीके का इस्तेमाल करके, हर इफ़ेक्ट को फिर से नहीं बनाया जा सकता.

खास तौर पर इस इस्तेमाल के उदाहरण के लिए, यहां दी गई स्क्रिप्ट उन ब्राउज़र के लिए फ़ॉलबैक लागू करती है जो स्क्रोल-ड्रिवन ऐनिमेशन के साथ काम नहीं करते. यह रूट एलिमेंट की स्क्रोल पोज़िशन को ट्रैक करने के लिए, स्क्रोल लिसनर का इस्तेमाल करता है. साथ ही, इसके हिसाब से प्रोग्रेस बार की transform प्रॉपर्टी को अपडेट करता है.

<script>
  if (!CSS.supports('animation-timeline', 'scroll()')) {
    const progress = document.querySelector('#progress');

    window.addEventListener('scroll', () => {
      const scrollable = document.documentElement.scrollHeight - window.innerHeight;
      const scrolled = window.scrollY;
      const progressPercentage = (scrolled / scrollable);

      progress.style.transform = `scaleX(${progressPercentage})`;
    });
  }
</script>