CSS প্রপার্টি scroll-initial-target একটি ডিক্লারেটিভ, CSS-অনলি উপায় অফার করে যার মাধ্যমে কোনও নির্দিষ্ট ডিসেন্ডেন্ট এলিমেন্টকে তার স্ক্রল কন্টেনারের দৃশ্যমান অংশে নিয়ে আসা যায়, কন্টেনারটি রেন্ডার হওয়ার সাথে সাথেই। আগে, ডেভেলপাররা JavaScript (Element.scrollIntoView()) বা URL ফ্র্যাগমেন্ট আইডেন্টিফায়ার (#item-id)-এর উপর নির্ভর করতেন, যার দুটিরই সীমাবদ্ধতা আছে এবং প্রয়োগ করা কঠিন।
কীভাবে প্রয়োগ করতে হয়
এটি সফলভাবে প্রয়োগ করতে:
- স্ক্রল কন্টেনার আছে কিনা তা নিশ্চিত করুন: টার্গেট এলিমেন্টটি অবশ্যই একটি স্ক্রল কন্টেনারের মধ্যে থাকতে হবে (ওভারফ্লো সহ একটি এলিমেন্ট যা স্ক্রল করার অনুমতি দেয়, যেমন
overflow: auto)। এটি রুট<html>এলিমেন্ট সহ যেকোনও পূর্বপুরুষ এলিমেন্ট হতে পারে। - আইটেম টার্গেট করা: আপনি যে নির্দিষ্ট ডিসেন্ডেন্ট এলিমেন্ট ভিউতে আনতে চান সেটিতে
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নির্দিষ্ট করলে, DOM ট্রি অর্ডারে যেটি প্রথমে দেখা যায় ব্রাউজার সেটি বেছে নেয়। - মিডিয়ার জন্য ডাইমেনশন লিখুন। যেহেতু প্রাথমিক লেআউটের সময় স্ক্রল পজিশন গণনা করা হয়, তাই মিডিয়া লোড হওয়ার পরে টার্গেট যাতে শিফট না হয় তার জন্য ছবি বা ভিডিওতে
aspect-ratioবা নির্দিষ্টheight/widthআছে কিনা তা নিশ্চিত করুন। - অগ্রাধিকারের ক্রম-এর জন্য অবশ্যই অ্যাকাউন্ট তৈরি করুন: URL ফ্র্যাগমেন্ট (যেমন,
example.com/#top) এবং কন্টেনার-লেভেলscroll-startপ্রপার্টি, দুটিইscroll-initial-target-এর চেয়ে বেশি অগ্রাধিকার পায়।
ফলব্যাক স্ট্র্যাটেজি
যেসব ব্রাউজারে এখনও API কাজ করে না, সেগুলির জন্য জাভাস্ক্রিপ্ট ফলব্যাক ব্যবহার করুন। HTML পার্সিং সম্পূর্ণ হওয়ার সাথে সাথেই ব্রাউজার যাতে এলিমেন্টটি স্ক্রল করে ভিউতে নিয়ে আসে তা নিশ্চিত করতে 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" });
}
}
});