দেখার জন্য টানুন

"দেখার জন্য টানুন" হল একটি UI প্যাটার্ন যেখানে কন্টেন্ট (যেমন সার্চ বার বা রিফ্রেশ কন্ট্রোল) স্ক্রল করা যায় এমন জায়গার উপরে লুকানো থাকে এবং ব্যবহারকারী এটি দেখার জন্য নিচের দিকে টানতে (উপরের দিকে স্ক্রল করতে) পারেন। এই প্যাটার্নটি সাধারণত মোবাইল অ্যাপ এবং ওয়েব অ্যাপে সার্চ বার, ফিল্টার এবং অন্যান্য সেকেন্ডারি কন্ট্রোলের জন্য ব্যবহৃত হয় যা অ্যাক্সেসযোগ্য হওয়া উচিত কিন্তু অবিলম্বে দৃশ্যমান নয়।

CSS প্রপার্টি scroll-initial-target এই প্যাটার্ন প্রয়োগ করার জন্য একটি ঘোষণামূলক, শুধুমাত্র CSS-এর মাধ্যমে কাজ করে এমন উপায় অফার করে। মূল কন্টেন্ট এলিমেন্টে scroll-initial-target: nearest সেট করার মাধ্যমে, স্ক্রল কন্টেনার লুকানো কন্টেন্ট স্ক্রল করে ভিউয়ের বাইরে নিয়ে গিয়ে রেন্ডার করবে। আগে, ডেভেলপাররা এটি করার জন্য JavaScript (Element.scrollIntoView()) বা URL ফ্র্যাগমেন্ট শনাক্তকারীর (#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;
}

স্ট্র্যাটেজিক প্রয়োগ ও পেশাদার পদ্ধতি

• লোড হওয়ার পরে স্ক্রল করা যায় এমন অংশের নির্দিষ্ট কোনও জায়গায় ব্যবহারকারীর মনোযোগ আকর্ষণ করতে এবং সবচেয়ে উপরে থাকা সার্চ বারের মতো পেরিফেরাল UI ইউনিট ইচ্ছাকৃতভাবে লুকাতে চাইলে scroll-initial-target: nearest ব্যবহার করুন।
• অ্যাক্সেসিবিলিটি ফোকাসের সাথে এটি গুলিয়ে ফেলবেন না। এই প্রপার্টি শুধু ভিজ্যুয়াল ভিউপোর্ট সরায়; এটি কীবোর্ড ফোকাস সরায় না। টার্গেট যদি কীবোর্ড ব্যবহারকারীদের জন্য শুরুর পয়েন্ট হিসেবে ব্যবহার করার জন্য হয়, তাহলে আপনাকে ম্যানুয়ালি element.focus() ম্যানেজ করতে হবে।
• লোড করার সময় মসৃণ "স্ক্রলিং" অ্যানিমেশন প্রয়োজন হলে এটি ব্যবহার করবেন না; এই প্রপার্টিটি ডিসক্রিট এবং লেআউট ফেজ চলাকালীন সাথে সাথে পজিশন সেট করে।
• একই স্ক্রলযোগ্য কন্টেনারের মধ্যে একাধিক এলিমেন্টে scroll-initial-target সেট করবেন না। একাধিক এলিমেন্ট scroll-initial-target: nearest নির্দিষ্ট করলে, DOM ট্রি অর্ডারে যেটি প্রথমে দেখা যায় ব্রাউজার সেটি বেছে নেয়।
• অগ্রাধিকারের ক্রম-এর জন্য অবশ্যই অ্যাকাউন্ট তৈরি করুন: URL ফ্র্যাগমেন্ট (যেমন, example.com/#top) এবং কন্টেনার-লেভেল scroll-start প্রপার্টি, দুটিই scroll-initial-target-এর চেয়ে বেশি অগ্রাধিকার পায়।

ফলব্যাক স্ট্র্যাটেজি

যেসব ব্রাউজারে এখনও API কাজ করে না, সেগুলির জন্য জাভাস্ক্রিপ্ট ফলব্যাক ব্যবহার করুন। মনে রাখবেন, কন্টেন্ট টেনে প্রকাশ করার জন্য, আপনি চান যে মূল কন্টেন্টটি কন্টেনারের 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' });
    }
  }
});