CSS স্ক্রল স্ন্যাপ। জাভাস্ক্রিপ্ট ছাড়াই স্ক্রল নিয়ন্ত্রন করা
যখন সি এস এস ৩ প্রথম ড্রাফ্ট হয় আর মেজর ব্রাউজারেরা এর কিছু কিছু ফিচার ইমপ্লিমেন্ট করা শুরু করে, তখনকার কথা। কয় মাসের মধ্যে পুরা ওয়েব সুন্দর সুন্দর ইন্টারএকটিভ ওয়েবসাইট দিয়ে ভরে গেল। মানুষ এত ক্রিয়েটিভ হতে পারে, ভাবতেই ভালো লাগে। তখন থেকে স্ক্রলিং ওয়ানপেজ ওয়েবসাইট বেশ পপুলার একটা প্যাটার্ন হয়ে গেল। এখনও অনেক পপুলার এই টাইপের সাইট। স্ক্রল করার সাথে সাথে নানা ধরনের এনিমেশন আর কারসাজি হয়।
এর মধ্যে বেশীভাগ সাইটে একটা ব্যাপার ছিলো। স্ক্রল করলে যেকোন এক যায়গায় না থেমে ঠাস করে একটা স্পেসিফিক যায়গায় থামতো সবসময়। আমি প্রথম প্রথম ভাবতাম আমার মনেহয় স্ক্রল করার হাত খুব ভালো। গর্বও হতো। পরে আস্তে আস্তে টের পেলাম আসলে জাভাস্ক্রিপ্ট দিয়ে স্ক্রল পজিশন ডিটেক্ট করে যেখানে থেমে গেছি, সেখানকার সবচেয়ে কাছের কোন একটা যায়গায় জাভাস্ক্রিপ্ট বাকী পথ স্ক্রল করে নিয়ে যায়।
এতদিন যেই জিনিসটা জাভাস্ক্রিপ্ট দিয়ে করা লাগতো, এখন সেই জিনিস সি এস এস দিয়েই করা যায়।
স্ক্রল স্ন্যাপ আসলে কি করে?
আপনি পেজ স্ক্রল করা শেষ করার পর আপনার স্ক্রল পজিশন থেকে কাছাকাছি যে পয়েন্ট আপনি দেখিয়ে দিয়েছেন, সেখানে সি এস এস স্ক্রল করে নিয়ে যায়। তার মানে আপনার ইউজার স্ক্রল করলে ঠিক আপনার বেধে দেয়া পয়েন্টগুলোতে গিয়েই স্ক্রল বন্ধ হবে।
নীচের উদাহরনে স্ক্রল করার ট্রাই করে দেখেন(এখনকার আপডেট অনুযায়ী শুধু লেটেস্ট ক্রোমে কাজ করার কথা):
দেখবেন ফার্স্ট পেজ, সেকেন্ড পেজ অথবা থার্ড পেজে গিয়েই স্ক্রল শেষ হবে। দুইটা পেজের মাঝখানে ছেড়ে দিলে যেই পেজের বেশী অংশ দেখা যাচ্ছে, সেটাতে অটোমেটিক স্ক্রল হয়ে যাবে।
যেভাবে ব্যাবহার করবেন:
প্রথমে একটা কন্টেইনার দরকার, যেটার ভিতরের জিনিসপত্র স্ক্রল হবে। কন্টেইনারে কয়েকটা সেটিং এডজাস্ট করা দরকার:
.container{
overflow-y:scroll;
scroll-snap-type:y mandatory;
}এর সাথে height, বক্স মডেল এইগুলা তো থাকবেই, আমি শুধু জরুরী গুলো লিখলাম। এখানে overflow-y:scroll এইটা পুরানো। কিন্তু scroll-snap-type এইটা নতুন। এইটার ভ্যালুর দুইটা অংশ: অক্ষ আর কট্টরতা 🤣
y mandatory দিয়ে এখানে বুঝানো হচ্ছে, y অক্ষ বরাবর সব সিচুয়েশনে অবশ্যই স্ক্রল স্ন্যাপ করতে হবে। এখানে y এর বদলে x অক্ষ বরাবর স্ক্রল করানো যেত (ফটো গ্যালারী টাইপের এপ্লিকেশনে কাজে আসবে) আবার mandatory এর যায়গায় proximity ব্যাবহার করা যেত। সেক্ষেত্রে স্ক্রল পয়েন্টের খুব কাছাকাছি যাওয়ার আগ পর্যন্ত স্ন্যাপ করতো না।
এর পর কন্টেইনারের ভিতরে যে কয়টা এলিমেন্টে স্ক্রল স্ন্যাপ করার দরকার, প্রতিটাতে একটা সি এস এস প্রোপার্টি যোগ করে দিলেই হবে। প্রোপার্টিটা হচ্ছে scroll-snap-align । আমার ক্ষেত্রে প্রতিটা সেকশন ১০০% height তাই আমার ক্ষেত্রে আমি কমনভাবে ব্যাবহার করেছি:
.children{
scroll-snap-align:center;
} আপনার ইউজকেইস ভেদে এটার ভ্যালু start , center অথবা end হতে পারে।
ব্যাস হয়ে গেল। এখন আপনার পেজ স্ক্রল করে ট্রাই করে দেখতে পারেন।
ব্রাউজার কম্প্যাটিবিলিটি:
অনেক ব্রাউজারেই এই ফিচারের কম্প্যাটিবিলিটি আছে। সমস্যা হচ্ছে এই পোস্টে উল্লেখ করা সিনট্যাক্স আপডেট করা সিনট্যাক্স। এর আগে সিনট্যাক্স আলাদা ছিলো। ব্লগ পোস্ট লেখার সময় বেশীভাগ ব্রাউজারে এখনো পুরানো সিনট্যাক্সের সাপোর্ট আছে। তবে সব ব্রাউজারের পরের ভার্শনে আশা করা যাচ্ছে নতুন সিনট্যাক্সের সাপোর্ট চলে আসবে। তাই স্ক্রল স্ন্যাপ শিখে ফেলার এখনই সময়।