স্ক্রল স্ন্যাপিং পজিশন ঘোষণা করে ভালভাবে নিয়ন্ত্রিত স্ক্রল করার অভিজ্ঞতা তৈরি করুন।
CSS স্ক্রল স্ন্যাপ ফিচার ওয়েব ডেভেলপারদের স্ক্রল স্ন্যাপিং পজিশন ঘোষণা করার মাধ্যমে ভালোভাবে নিয়ন্ত্রিত স্ক্রল করার অভিজ্ঞতা তৈরি করার সুবিধা দেয়। পৃষ্ঠা সংখ্যা সহ নিবন্ধ এবং ছবির ক্যারোজেল হল এর দুটি সাধারণভাবে ব্যবহৃত উদাহরণ। CSS স্ক্রল স্ন্যাপ এই ধরনের জনপ্রিয় UX প্যাটার্ন তৈরি করার জন্য সহজে ব্যবহারযোগ্য ও সামঞ্জস্যপূর্ণ API প্রদান করে।
ব্যাকগ্রাউন্ড
স্ক্রল স্ন্যাপিংয়ের ক্ষেত্রে
ওয়েবে কন্টেন্টের সাথে ইন্টার্যাক্ট করার জন্য স্ক্রল করা হল একটি জনপ্রিয় ও স্বাভাবিক উপায়। এটি হল প্ল্যাটফর্মের নেটিভ উপায় যার মাধ্যমে স্ক্রিনে একবারে যা দেখা যায় তার চেয়ে বেশি তথ্য অ্যাক্সেস করা যায়, বিশেষ করে মোবাইল প্ল্যাটফর্মের ক্ষেত্রে এটি অত্যন্ত গুরুত্বপূর্ণ কারণ সেখানে স্ক্রিনের জায়গা সীমিত। তাই, ওয়েব লেখকরা যে গভীর শ্রেণীবিন্যাসের পরিবর্তে স্ক্রল করা যায় এমন ফ্ল্যাট তালিকায় কন্টেন্ট সাজাতে পছন্দ করেন, তাতে অবাক হওয়ার কিছু নেই।
স্ক্রল করার প্রধান অসুবিধা হল যে এটি নিখুঁত নয়। স্ক্রল করার সময় খুব কমই কোনও অনুচ্ছেদ বা বাক্যের সাথে অ্যালাইন করা হয়। এটি পৃষ্ঠা বা আইটেম অনুযায়ী সাজানো কন্টেন্টের ক্ষেত্রে আরও বেশি প্রযোজ্য হয়, যেখানে স্ক্রল করার সময় পৃষ্ঠা বা ছবির মাঝখানে এসে থেমে যায় এবং কন্টেন্ট আংশিকভাবে দেখা যায়। এইসব ব্যবহারের ক্ষেত্রে ভালভাবে নিয়ন্ত্রিত স্ক্রলিংয়ের অভিজ্ঞতা থেকে সুবিধা পাওয়া যায়।
এই ত্রুটি দূর করার জন্য ওয়েব ডেভেলপাররা স্ক্রল নিয়ন্ত্রণ করতে অনেকদিন ধরেই জাভাস্ক্রিপ্ট-ভিত্তিক সমাধানের উপর নির্ভর করে এসেছেন। তবে, জাভাস্ক্রিপ্ট-ভিত্তিক সমাধানগুলি স্ক্রোল কাস্টমাইজেশন প্রিমিটিভের অভাব বা কম্পোজিট করা স্ক্রোলিং অ্যাক্সেসের কারণে সম্পূর্ণ বিশ্বস্ত সমাধান প্রদান করতে ব্যর্থ হয়। CSS স্ক্রল স্ন্যাপ একটি দ্রুত, হাই ফিডেলিটি এবং সহজে ব্যবহারযোগ্য সমাধান নিশ্চিত করে যা ব্রাউজার জুড়ে ধারাবাহিকভাবে কাজ করে।
CSS স্ক্রল স্ন্যাপ ওয়েব লেখকদের প্রতিটি স্ক্রল কন্টেনারকে সীমানা সহ চিহ্নিত করার অনুমতি দেয় যাতে স্ক্রল অপারেশন শেষ করা যায়। ব্রাউজার তখন স্ক্রল অপারেশনের বিবরণ, স্ক্রল কন্টেনারের লেআউট ও দৃশ্যমানতা এবং স্ন্যাপ পজিশনের বিবরণের উপর নির্ভর করে সবচেয়ে উপযুক্ত শেষ পজিশন বেছে নেয়, তারপর মসৃণভাবে অ্যানিমেট করে সেখানে নিয়ে যায়। আমাদের আগের উদাহরণে ফিরে যাওয়া যাক, ব্যবহারকারী ক্যারাউজেল স্ক্রল করা শেষ করলে, এর দৃশ্যমান ছবি স্ন্যাপ করে জায়গামতো বসে যায়। জাভাস্ক্রিপ্টের মাধ্যমে স্ক্রল অ্যাডজাস্ট করার প্রয়োজন নেই।
CSS স্ক্রল স্ন্যাপ
স্ক্রল স্ন্যাপিং হল স্ক্রল অপারেশন শেষ হওয়ার পরে, স্ক্রল কন্টেনারের স্ক্রল অফসেটকে পছন্দের স্ন্যাপ পজিশনে অ্যাডজাস্ট করার কাজ।
scroll-snap-type
প্রপার্টি ব্যবহার করে স্ক্রল কন্টেনারে স্ক্রল স্ন্যাপিং চালু করা যেতে পারে। এটি ব্রাউজারকে বলে যে এটির ডিসেন্ডেন্টদের দ্বারা তৈরি স্ন্যাপ পজিশনে এই স্ক্রল
কন্টেনার স্ন্যাপ করার কথা বিবেচনা করা উচিত। scroll-snap-type
কোন অক্ষে স্ক্রল করা হবে তা নির্ধারণ করে: x, y, অথবা both, এবং
স্ন্যাপিংয়ের কঠোরতা: mandatory, proximity. এই বিষয়ে পরে আরও জানানো হবে।
কোনও এলিমেন্টে কাঙ্ক্ষিত অ্যালাইনমেন্ট ঘোষণা করে স্ন্যাপ পজিশন তৈরি করা যেতে পারে।
এই পজিশন হল স্ক্রল অফসেট যেখানে নিকটতম পূর্বপুরুষ স্ক্রল
কন্টেনার এবং এলিমেন্ট প্রদত্ত অক্ষের জন্য নির্দিষ্ট করা হিসাবে সারিবদ্ধ করা হয়। প্রতিটি
অ্যাক্সিসে নিম্নলিখিত অ্যালাইনমেন্ট সম্ভব: start, end, center।
start অ্যালাইনমেন্টের অর্থ হল, স্ক্রল কন্টেনার স্ন্যাপপোর্ট শুরুর প্রান্তটি
এলিমেন্ট স্ন্যাপ এরিয়া শুরুর প্রান্তের সাথে ফ্লাশ করা উচিত। একইভাবে, end এবং
center অ্যালাইনমেন্টের অর্থ হল স্ক্রল কন্টেনার স্ন্যাপপোর্ট শেষ প্রান্ত বা কেন্দ্র
এলিমেন্ট স্ন্যাপ এরিয়া শেষ প্রান্ত বা কেন্দ্রের সাথে ফ্লাশ করা উচিত।
এইসব ধারণা কীভাবে ব্যবহার করতে হয় তা নিম্নলিখিত উদাহরণ থেকে বোঝা যাবে।
উদাহরণ: অনুভূমিক গ্যালারি
স্ক্রল স্ন্যাপিংয়ের একটি সাধারণ ব্যবহার হল ইমেজ ক্যারোজেল। যেমন, স্ক্রল করার সময় প্রতিটি ছবিতে স্ন্যাপ করে এমন অনুভূমিক ইমেজ ক্যারোজেল তৈরি করতে, আমরা
স্ক্রল কন্টেনারের অনুভূমিক অক্ষে বাধ্যতামূলক scroll-snap-type
নির্দিষ্ট করতে পারি।
প্রতিটি ছবিকে scroll-snap-align: center-এ সেট করতে পারি যাতে
স্ন্যাপ করার সময় ক্যারোজেলের মধ্যে ছবিটি সেন্টারে থাকে।
#gallery {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
#gallery img {
scroll-snap-align: center;
}
<div id="gallery">
<img src="cat.jpg">
<img src="dog.jpg">
<img src="another_cute_animal.jpg">
</div>
যেহেতু স্ন্যাপ পজিশন কোনও এলিমেন্টের সাথে যুক্ত থাকে, তাই স্ন্যাপিং অ্যালগরিদম এলিমেন্ট এবং স্ক্রল কন্টেনারের সাইজ অনুযায়ী কখন এবং কীভাবে স্ন্যাপ করতে হবে তা স্মার্টভাবে নির্ধারণ করতে পারে। যেমন, এমন একটি পরিস্থিতি বিবেচনা করুন যেখানে একটি ছবি ক্যারোজেলের থেকে বড়। একটি সাধারণ স্ন্যাপিং অ্যালগরিদম ব্যবহারকারীকে সম্পূর্ণ ছবি দেখার জন্য চারপাশে প্যান করা থেকে বিরত রাখতে পারে। তবে স্পেসিফিকেশন অনুযায়ী, এই ধরনের কেস শনাক্ত করতে এবং ব্যবহারকারীকে সেই ছবির মধ্যে অবাধে স্ক্রল করার অনুমতি দিতে, শুধুমাত্র তার প্রান্তে স্ন্যাপ করতে হবে।
উদাহরণ: কোনও প্রোডাক্টের পেজ যা ব্যবহারকারী আগে দেখেছেন
স্ক্রল স্ন্যাপিং থেকে উপকৃত হতে পারে এমন আরেকটি সাধারণ কেস হল একাধিক লজিক্যাল বিভাগ সহ পৃষ্ঠাগুলি
উল্লম্বভাবে স্ক্রোল করার জন্য, উদাহরণস্বরূপ, একটি সাধারণ
প্রোডাক্ট পেজ। এই ধরনের ক্ষেত্রে scroll-snap-type: y proximity; আরও বেশি
উপযুক্ত। ব্যবহারকারী কোনও নির্দিষ্ট বিভাগের মাঝখানে স্ক্রল করলে এটি কোনও বাধা সৃষ্টি করে না, তবে তারা যথেষ্ট কাছাকাছি স্ক্রল করলে এটি স্ন্যাপ করে এবং একটি নতুন বিভাগে মনোযোগ আকর্ষণ করে।
এটি কীভাবে করা যেতে পারে তা এখানে দেওয়া হল:
article {
scroll-snap-type: y proximity;
/* Reserve space for header plus some extra space for sneak peeking. */
scroll-padding-top: 15vh;
overflow-y: scroll;
}
section {
/* Snap align start. */
scroll-snap-align: start;
}
header {
position: fixed;
height: 10vh;
}
<article>
<header> Header </header>
<section> Section One </section>
<section> Section Two </section>
<section> Section Three </section>
</article>
প্যাডিং ও মার্জিন স্ক্রল করুন
প্রোডাক্ট পৃষ্ঠার উপরে একটি নির্দিষ্ট পজিশনে হেডার আছে। এছাড়াও, ডিজাইনে স্ক্রল কন্টেনার স্ন্যাপ করা হলে উপরের কিছু অংশ দৃশ্যমান রাখার জন্য বলা হয়েছে, যাতে ব্যবহারকারীদের উপরের কন্টেন্ট সম্পর্কে একটি ডিজাইন ইঙ্গিত দেওয়া যায়।
scroll-padding
প্রপার্টি হল একটি নতুন css প্রপার্টি যা স্ক্রল কন্টেনারের কার্যকর
দেখার যোগ্য অঞ্চল বা স্ন্যাপপোর্ট সামঞ্জস্য করতে ব্যবহার করা যেতে পারে, যা
স্ক্রল স্ন্যাপ অ্যালাইনমেন্ট গণনা করার সময় ব্যবহৃত হয়। প্রপার্টি স্ক্রল কন্টেনারের প্যাডিং বক্সের
বিপরীতে একটি ইনসেট সংজ্ঞায়িত করে। আমাদের উদাহরণে, 15vh অতিরিক্ত ইনসেট
উপরে যোগ করা হয়েছে, যা ব্রাউজারকে স্ক্রল স্ন্যাপিংয়ের জন্য উল্লম্ব স্টার্ট এজ হিসেবে
স্ক্রল কন্টেনারের উপরের প্রান্তের নিচে 15vh-এ একটি নিম্ন অবস্থান বিবেচনা করার নির্দেশ দেয়। স্ন্যাপ করার সময়, স্ন্যাপ টার্গেট এলিমেন্টের শুরুর প্রান্তটি
এই নতুন পজিশনের সাথে ফ্লাশ হয়ে যাবে, যার ফলে উপরে জায়গা থাকবে।
scroll-margin
প্রপার্টিটি স্ন্যাপ টার্গেট এফেক্টিভ বক্স অ্যাডজাস্ট করার জন্য ব্যবহৃত আউটসেট পরিমাণ নির্ধারণ করে,
যা স্ন্যাপ স্ক্রল কন্টেনারে scroll-padding ফাংশনের মতোই কাজ করে।
আপনি হয়ত লক্ষ্য করেছেন যে এই দুটি প্রপার্টির মধ্যে "snap" শব্দটি নেই। এটি ইচ্ছাকৃতভাবে করা হয়েছে কারণ এগুলি আসলে সমস্ত প্রাসঙ্গিক স্ক্রল অপারেশনের জন্য বক্সটি পরিবর্তন করে এবং শুধুমাত্র স্ক্রল স্ন্যাপিং নয়। যেমন, Chrome
PageDown এবং PageUp-এর মতো পেজিং স্ক্রল অপারেশনের জন্য পৃষ্ঠার আকার গণনা করার সময় এবং
Element.scrollIntoView() অপারেশনের জন্য স্ক্রলের পরিমাণ গণনা করার সময় সেগুলিকে
বিবেচনা করে।
অন্যান্য স্ক্রলিং API-এর সাথে ইন্টার্যাকশন
DOM Scrolling API
স্ক্রিপ্টের মাধ্যমে শুরু করা সহ সব স্ক্রল অপারেশন শেষ হওয়ার পরে স্ক্রল স্ন্যাপিং হয়। আপনি Element.scrollTo-এর মতো API ব্যবহার করলে,
ব্রাউজার অপারেশনের জন্য স্ক্রল পজিশন গণনা করবে, তারপর
চূড়ান্ত স্ন্যাপ করা লোকেশন খুঁজে পেতে উপযুক্ত স্ন্যাপিং লজিক প্রয়োগ করবে। তাই, স্ন্যাপ করার জন্য ম্যানুয়ালি কোনও গণনা করতে
ব্যবহারকারীর স্ক্রিপ্টের প্রয়োজন নেই।
স্মুথ স্ক্রলিং
স্মুথ স্ক্রলিং প্রোগ্রাম্যাটিক স্ক্রল অপারেশনের আচরণ নিয়ন্ত্রণ করে, যেখানে স্ক্রল স্ন্যাপ এর গন্তব্য নির্ধারণ করে। যেহেতু তারা স্ক্রোলিংয়ের অর্থোগোনাল দিকগুলি নিয়ন্ত্রণ করে, তাই তারা একসাথে ব্যবহার করা যেতে পারে এবং একে অপরের পরিপূরক হতে পারে।
ওভারস্ক্রল সংক্রান্ত আচরণ
ওভারস্ক্রল বিহেভিয়ার API নিয়ন্ত্রণ করে যে কীভাবে একাধিক এলিমেন্ট জুড়ে স্ক্রল চেইন করা হয় এবং এটি স্ক্রল স্ন্যাপের দ্বারা প্রভাবিত হয় না।
সতর্কতা ও পেশাদার পদ্ধতি
টার্গেট এলিমেন্টগুলি একে অপরের থেকে অনেক দূরে থাকলে বাধ্যতামূলক স্ন্যাপিং ব্যবহার করা এড়িয়ে চলুন। এর ফলে স্ন্যাপ পজিশনের মধ্যে থাকা কন্টেন্ট অ্যাক্সেস করা নাও যেতে পারে।
অনেক ক্ষেত্রে, ফিচার শনাক্ত করার প্রয়োজন ছাড়াই,
স্ক্রল-স্ন্যাপিংকে একটি এনহ্যান্সমেন্ট হিসেবে যোগ করা যেতে পারে।
প্রয়োজন হলে, CSS স্ক্রল স্ন্যাপের জন্য সাপোর্ট শনাক্ত করতে @supports বা CSS.supports ব্যবহার করুন।
scroll-snap-type ব্যবহার করা এড়িয়ে চলুন, যা বন্ধ হয়ে যাওয়া স্পেসিফিকেশনেও রয়েছে।
CSS-এ ফিচার শনাক্তকরণ
@supports (scroll-snap-align: start) {
article {
scroll-snap-type: y proximity;
scroll-padding-top: 15vh;
overflow-y: scroll;
}
}
জাভাস্ক্রিপ্টে ফিচার শনাক্তকরণ
if (CSS.supports('scroll-snap-align: start')) {
// use css scroll snap
} else {
// use fallback
}
Element.scrollTo-এর মতো প্রোগ্র্যামাটিক স্ক্রলিং API
অনুরোধ করা স্ক্রল অফসেটে সবসময় শেষ হয় বলে ধরে নেবেন না। প্রোগ্রাম্যাটিক স্ক্রলিং সম্পূর্ণ হওয়ার পরে স্ক্রল স্ন্যাপিং
স্ক্রল অফসেট অ্যাডজাস্ট করতে পারে। মনে রাখবেন যে স্ক্রল স্ন্যাপের আগেও এটি একটি
ভাল অনুমান ছিল না কারণ অন্যান্য কারণে স্ক্রলিং
বাধাগ্রস্ত হতে পারে, তবে এটি বিশেষ করে স্ক্রল
স্ন্যাপিংয়ের ক্ষেত্রে প্রযোজ্য।
ভবিষ্যতের কাজ
Chrome টিমের সাম্প্রতিক সমীক্ষার
মূল ফোকাস ছিল স্ক্রল করার অভিজ্ঞতা।
সমীক্ষার ফলাফল থেকে এমন কয়েকটি ক্ষেত্র চিহ্নিত করা হয়েছে যেখানে প্লাগ-ইন লাইব্রেরি ও CSS-এর মধ্যে পার্থক্য কমানোর জন্য
আরও কাজ করতে হবে।
আসন্ন কাজ scroll-snap-এর উপর ফোকাস করবে, যার মধ্যে রয়েছে:
- বিভিন্ন ব্রাউজার জুড়ে API-এর উপলভ্যতা ও কম্প্যাটিবিলিটি।
scroll-start-এর মতো নতুন CSS API-তে কাজ করুন।snapChanged()-এর মতো নতুন JS ইভেন্ট নিয়ে কাজ করুন।