Scrollspy नेविगेशन बनाना

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

यह पैटर्न आम तौर पर दो स्थितियों में दिखता है:

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

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

पहले, स्क्रोलस्पाय पैटर्न के लिए JavaScript और IntersectionObserver एपीआई की ज़रूरत होती थी. मॉडर्न सीएसएस, scroll-target-group प्रॉपर्टी और :target-current स्यूडो-क्लास का इस्तेमाल करके, इसे हासिल करने का एक नेटिव तरीका उपलब्ध कराती है.

1. पक्का करें कि नेविगेशन लिंक, फ़्रैगमेंट आइडेंटिफ़ायर का इस्तेमाल करते हों: आपके नेविगेशन में ऐंकर लिंक (<a>) होने चाहिए. ये लिंक, फ़्रैगमेंट आइडेंटिफ़ायर (जैसे, <a href="#section-1">) का इस्तेमाल करके, उसी पेज पर मौजूद सेक्शन पर ले जाते हों जो आपके कॉन्टेंट सेक्शन के id से मैच करते हों.
2. स्क्रोल टारगेट ग्रुपिंग की सुविधा चालू करना: अपने नेविगेशन लिंक के कंटेनर पर scroll-target-group: auto प्रॉपर्टी लागू करें. इससे ब्राउज़र को पता चलता है कि इन लिंक को मार्कर के तौर पर इस्तेमाल करना है, जो अपने टारगेट को ट्रैक करते हैं.
3. ऐक्टिव लिंक को स्टाइल देना: अपने नेविगेशन लिंक पर :target-current स्यूडो-क्लास का इस्तेमाल करें, ताकि स्क्रोल कंटेनर में टारगेट सेक्शन दिखने पर स्टाइल लागू की जा सकें.
4. सिमैंटिक स्टेट: स्क्रोल करना बंद होने पर, चालू लिंक पर aria-current="true" को अपडेट करने के लिए स्क्रिप्ट का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि सहायक टेक्नोलॉजी को सही जानकारी दी गई है.

कोड का उदाहरण

इस उदाहरण में, उपयोगकर्ता के सेक्शन स्क्रोल करने पर, फ़िक्स किए गए नेविगेशन मेन्यू में ऐक्टिव लिंक को हाइलाइट किया गया है.

/* MANDATORY: The container of markers must have scroll-target-group: auto */
nav {
  /* Enables automatic tracking of fragment links */
  scroll-target-group: auto;
}
/* MANDATORY: Use :target-current to style the link whose target is in view. */
nav a:target-current {
  color: var(--accent, #007bff);
  border-bottom-color: var(--accent, #007bff);
}

<nav>
  <a href="#intro">Introduction</a>
  <a href="#features">Features</a>
  <a href="#pricing">Pricing</a>
</nav>

<main>
  <!-- MANDATORY: Each section must have a unique ID matching a link fragment in the <nav>. -->
  <section id="intro">
    <h2>Introduction</h2>
    <!-- content -->
  </section>
  <section id="features">
    <h2>Features</h2>
    <!-- content -->
  </section>
  <section id="pricing">
    <h2>Pricing</h2>
    <!-- content -->
  </section>
</main>

<script type="module">
  if (CSS.supports('scroll-target-group: auto')) {
    const syncAriaCurrent = () => {
      const currentLink = document.querySelector('nav a:target-current');
      document.querySelectorAll('nav a').forEach(link => {
        link.setAttribute('aria-current', link === currentLink ? 'true' : 'false');
      });
    };
    // Update the aria on initial page load. Ensure the DOM content is loaded, either by using `<script type="module">` or an event listener for `DOMContentLoaded`.
    syncAriaCurrent();
    // Update the aria after scroll ends
    document.addEventListener('scrollend', syncAriaCurrent);
  }
</script>

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

• नेविगेशन लिंक के लिए, किसी खास कंटेनर पर scroll-target-group: auto का इस्तेमाल ज़रूर करें: इससे ब्राउज़र को यह पता चलता है कि किन लिंक को ट्रैक करना चाहिए.
• ज़रूर पक्का करें कि टारगेट में यूनीक id एट्रिब्यूट हों, जो लिंक के href एट्रिब्यूट से मैच करते हों.
• सेक्शन के लिए ज़रूरत के मुताबिक वर्टिकल स्पेस दें: scroll-target-group से विज़िबल टारगेट की पहचान सबसे साफ़ तौर पर तब होती है, जब सेक्शन इतने बड़े हों कि एक बार में सिर्फ़ एक या दो सेक्शन दिखें.
• ज़रूरी: सुलभता के लिए, विज़ुअल स्टेट को aria-current के साथ मिरर किया जाना चाहिए. :target-current विज़ुअल पहलू को हैंडल करता है, लेकिन यह स्क्रीन रीडर को नहीं दिखता.
• AVOID: ऐक्टिव स्टेट के लिए सिर्फ़ रंग पर निर्भर न रहें. इसमें अन्य विज़ुअल संकेत शामिल करें. जैसे, फ़ॉन्ट वेट, अंडरलाइन या इंडिकेटर डॉट. इसके अलावा, यह पक्का करें कि रंगों के बीच ज़रूरत के मुताबिक कंट्रास्ट हो, ताकि कलर विज़न की समस्या वाले उपयोगकर्ताओं को अंतर आसानी से समझ आ सके.

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

scroll-target-group के साथ काम न करने वाले ब्राउज़र के लिए, आपको IntersectionObserver एपीआई पर आधारित फ़ॉलबैक का इस्तेमाल करना चाहिए.

<script>
  // Feature detection for scroll-target-group
  const supportsScrollTargetGroup = CSS.supports('scroll-target-group: auto');

  if (!supportsScrollTargetGroup) {
    const navLinks = document.querySelectorAll('nav a');
    const sections = document.querySelectorAll('main section');

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const id = entry.target.getAttribute('id');
          navLinks.forEach(link => {
            const isActive = link.getAttribute('href') === `#${id}`;
            // Use the escaped colon class for consistent styling
            link.classList.toggle('\:target-current', isActive);
            link.setAttribute('aria-current', isActive);
          });
        }
      });
    }, { rootMargin: '-50% 0px -50% 0px', threshold: 0 });

    sections.forEach(section => observer.observe(section));
  }
</script>

<style>
  /* Fallback style if :target-current is not supported.
     Use :is() to combine the native pseudo-class with a fallback class for older browsers. DO NOT use `nav a:target-current, nav a.\:target-current, as the unrecognized pseudoselector invalidates the entire rule in older browsers. */
  nav a:is(:target-current, .\:target-current) {
    color: var(--accent, #007bff);
    border-bottom-color: var(--accent, #007bff);
    font-weight: bold;
  }
</style>