शुरुआती रेंडर के लिए स्क्रोल टारगेट सेट करना

सीएसएस प्रॉपर्टी scroll-initial-target, सीएसएस का इस्तेमाल करके किसी खास डिसेंडेंट एलिमेंट को उसके स्क्रोल कंटेनर के दिखने वाले हिस्से में लाने का एक डिक्लेरेटिव तरीका उपलब्ध कराती है. ऐसा तब होता है, जब वह कंटेनर रेंडर हो जाता है. पहले, डेवलपर JavaScript (Element.scrollIntoView()) या यूआरएल फ़्रैगमेंट आइडेंटिफ़ायर (#item-id) पर भरोसा करते थे. हालांकि, दोनों की अपनी सीमाएं हैं और इन्हें लागू करना मुश्किल है.

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

इस सुविधा को लागू करने के लिए:

1. स्क्रोल कंटेनर का इस्तेमाल करें: टारगेट एलिमेंट, स्क्रोल कंटेनर के अंदर होना चाहिए. स्क्रोल कंटेनर, ओवरफ़्लो वाला ऐसा एलिमेंट होता है जिसमें स्क्रोल किया जा सकता है, जैसे कि overflow: auto. यह कोई भी ऐंसेस्टर एलिमेंट हो सकता है. इसमें रूट <html> एलिमेंट भी शामिल है.
2. आइटम को टारगेट करना: उस डिसेंडेंट एलिमेंट पर scroll-initial-target: nearest लागू करें जिसे आपको व्यू में लाना है.

कोड का उदाहरण: वर्टिकल मीडिया फ़ीड

इस उदाहरण में, फ़ीड को सूची में सबसे ऊपर मौजूद आइटम के बजाय, "सुविधा" वाले किसी खास आइटम पर स्क्रोल किया गया है.

/** 
 * TARGET: The item that should be visible on initial load.
 */
.item.target {
  scroll-initial-target: nearest;
}

रणनीति को लागू करने के तरीके और सबसे सही तरीके

• "बीच से शुरू होने वाले" अनुभवों के लिए, scroll-initial-target का इस्तेमाल करें. जैसे, मौजूदा दिन से शुरू होने वाला कैलेंडर या किसी खास इमेज से शुरू होने वाली गैलरी.
• इसे सुलभता फ़ोकस के साथ न मिलाएं. यह प्रॉपर्टी सिर्फ़ विज़ुअल व्यूपोर्ट को मूव करती है; यह कीबोर्ड फ़ोकस को मूव नहीं करती. अगर टारगेट को कीबोर्ड इस्तेमाल करने वाले लोगों के लिए शुरुआती पॉइंट बनाना है, तो आपको element.focus() को मैन्युअल तरीके से मैनेज करना होगा.
• अगर आपको लोड होने पर, "स्क्रोल करने" वाला स्मूद ऐनिमेशन चाहिए, तो इसका इस्तेमाल न करें. यह प्रॉपर्टी अलग होती है और लेआउट फ़ेज़ के दौरान, पोज़िशन को तुरंत सेट करती है.
• स्क्रोल किए जा सकने वाले एक ही कंटेनर में मौजूद कई एलिमेंट पर, scroll-initial-target को सेट न करें. अगर कई एलिमेंट scroll-initial-target: nearest तय करते हैं, तो ब्राउज़र उस एलिमेंट को चुनता है जो डीओएम ट्री के क्रम में सबसे पहले दिखता है.
• मीडिया के लिए डाइमेंशन ज़रूर दें. स्क्रोल की पोज़िशन का हिसाब शुरुआती लेआउट के दौरान लगाया जाता है. इसलिए, पक्का करें कि इमेज या वीडियो में aspect-ratio या तय height/width हो, ताकि मीडिया लोड होने के बाद टारगेट शिफ़्ट न हो.
• प्राथमिकता के क्रम का ध्यान रखें: यूआरएल फ़्रैगमेंट (जैसे, example.com/#top) और कंटेनर-लेवल की scroll-start प्रॉपर्टी, दोनों को scroll-initial-target से ज़्यादा प्राथमिकता दी जाती है.

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

जिन ब्राउज़र पर यह एपीआई काम नहीं करता उनके लिए, JavaScript फ़ॉलबैक का इस्तेमाल करें. DOMContentLoaded इवेंट का इस्तेमाल करें, ताकि एचटीएमएल पार्सिंग पूरी होते ही ब्राउज़र, एलिमेंट को स्क्रोल करके व्यू में ले आए. इससे सभी इमेज और संसाधनों के लोड होने का इंतज़ार करने के मुकाबले, तेज़ी से अनुभव मिलता है. इसके अलावा, स्क्रिप्ट को <body> एलिमेंट के आखिर में भी रखा जा सकता है. इससे इवेंट लिसनर की ज़रूरत नहीं पड़ती.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const feedTarget = document.querySelector(".item.target");
    if (feedTarget) {
      // 'block: center' ensures the featured media is centered in view
      feedTarget.scrollIntoView({ behavior: "instant", block: "center" });
    }
  }
});