देखने के लिए खींचें

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

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

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

पुल-टू-रिवील पैटर्न लागू करने के लिए:

1. स्क्रोल कंटेनर का इस्तेमाल करें: टारगेट एलिमेंट, स्क्रोल कंटेनर के अंदर होना चाहिए. स्क्रोल कंटेनर, ओवरफ़्लो वाला ऐसा एलिमेंट होता है जिसमें स्क्रोल किया जा सकता है, जैसे कि overflow: auto. यह कोई भी ऐंसेस्टर एलिमेंट हो सकता है. इसमें रूट <html> एलिमेंट भी शामिल है.
2. छिपे हुए एलिमेंट को तय करें: जिस कॉन्टेंट को छिपाना है (जैसे, खोज बार) उसे स्क्रोल कंटेनर के अंदर पहले डिसेंडेंट के तौर पर रखें. शुरुआत में लोड होने पर, यह एलिमेंट स्क्रोल करके व्यू से बाहर हो जाएगा.
3. मुख्य कॉन्टेंट तय करें: मुख्य कॉन्टेंट एलिमेंट को छिपे हुए एलिमेंट के तुरंत बाद रखें. यह वह एलिमेंट है जो उपयोगकर्ता को सबसे पहले दिखना चाहिए.
4. मुख्य कॉन्टेंट को टारगेट करें: मुख्य कॉन्टेंट एलिमेंट पर scroll-initial-target: nearest लागू करें, ताकि स्क्रोल कंटेनर, स्क्रोल किए गए व्यू के साथ रेंडर हो और उसके ऊपर मौजूद एलिमेंट छिप जाए.
5. स्क्रोल स्नैपिंग जोड़ें: यह पक्का करने के लिए कि छिपा हुआ एलिमेंट हमेशा पूरी तरह से दिखे या पूरी तरह से छिपा रहे (और कुछ हद तक स्क्रोल की गई स्थिति में न रहे), स्क्रोल कंटेनर में scroll-snap-type: y mandatory जोड़ें. साथ ही, छिपे हुए एलिमेंट और मुख्य कॉन्टेंट एलिमेंट, दोनों में scroll-snap-align: start जोड़ें.

कोड का उदाहरण: खोज बॉक्स दिखाने के लिए पुल करना

/**
 * ANCESTOR: Define the scroll container.
 * Scroll snapping ensures the search bar is always
 * either fully visible or fully hidden.
 */
.scroll-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/**
 * HIDDEN ELEMENT: The search bar hidden above the fold on load.
 * It has scroll-snap-align so it snaps into place when pulled down.
 */
.search-bar {
  height: 60px;
  scroll-snap-align: start;
}

/**
 * MAIN CONTENT + TARGET: The element the user sees first.
 * scroll-snap-align makes it a valid snap point.
 * scroll-initial-target tells the browser to scroll here on
 * initial render, hiding the search bar above it.
 */
.main-content {
  scroll-snap-align: start;
  scroll-initial-target: nearest;
}

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

• DO use scroll-initial-target: nearest when you want to draw the user's attention to a specific part of a scrollable area upon load and intentionally hide peripheral UI units like a search bar at the very top.
• इसे सुलभता फ़ोकस के साथ न मिलाएं. यह प्रॉपर्टी सिर्फ़ विज़ुअल व्यूपोर्ट को मूव करती है; यह कीबोर्ड फ़ोकस को मूव नहीं करती. अगर टारगेट को कीबोर्ड इस्तेमाल करने वाले लोगों के लिए शुरुआती पॉइंट बनाना है, तो आपको element.focus() को मैन्युअल तरीके से मैनेज करना होगा.
• अगर आपको लोड होने पर, "स्क्रोल करने" वाला स्मूद ऐनिमेशन चाहिए, तो इसका इस्तेमाल न करें. यह प्रॉपर्टी अलग होती है और लेआउट फ़ेज़ के दौरान, पोज़िशन को तुरंत सेट करती है.
• स्क्रोल किए जा सकने वाले एक ही कंटेनर में मौजूद कई एलिमेंट पर, scroll-initial-target को सेट न करें. अगर कई एलिमेंट scroll-initial-target: nearest तय करते हैं, तो ब्राउज़र उस एलिमेंट को चुनता है जो डीओएम ट्री के क्रम में सबसे पहले दिखता है.
• प्राथमिकता के क्रम का ध्यान रखें: यूआरएल फ़्रैगमेंट (जैसे, example.com/#top) और कंटेनर-लेवल की scroll-start प्रॉपर्टी, दोनों को scroll-initial-target से ज़्यादा प्राथमिकता दी जाती है.

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

जिन ब्राउज़र पर यह एपीआई काम नहीं करता उनके लिए, JavaScript फ़ॉलबैक का इस्तेमाल करें. ध्यान दें कि कॉन्टेंट को खींचकर दिखाने के लिए, आपको मुख्य कॉन्टेंट को कंटेनर के start (सबसे ऊपर) से बाउंड करना होगा.

/**
 * Progressive Enhancement Fallback
 */
document.addEventListener("DOMContentLoaded", () => {
  // Check for native CSS support
  if (!CSS.supports("scroll-initial-target", "nearest")) {
    const targetContent = document.querySelector('.main-content.target');
    if (targetContent) {
      // Use behavior: "instant" to mimic the native CSS behavior
      // 'block: start' should match your CSS 'scroll-snap-align' (or expected top position)
      targetContent.scrollIntoView({ behavior: 'instant', block: 'start' });
    }
  }
});