স্ক্রল ইফেক্ট — scroll-snap, smooth scroll আর scroll-driven animation

১ · স্ক্রল কোথায় হয় — scroll container আবার মনে করি

ঢাকার মেট্রো রেলের জানালার কথা ভাবুন। জানালার ফ্রেম স্থির, কিন্তু বাইরের দৃশ্য সরে যাচ্ছে। ওয়েবপাতায় স্ক্রলও ঠিক তাই: একটি স্থির “জানালা”, আর তার পেছনে লম্বা কনটেন্ট সরে যায়। এই জানালাকেই CSS বলে scroll container.

পর্ব ২৩-এ দেখেছেন, কোনো বাক্সে overflow-এর মান auto, scroll বা hidden দিলে বাক্সটি scroll container হয়ে যায়। ভেতরের জিনিস বাক্সের চেয়ে বড় হলে বাক্সের ভেতরেই স্ক্রল হয়, বাকি পাতা নড়ে না। আর পুরো পাতার স্ক্রল? সেটির মালিক হলো রুট element <html> — ব্রাউজার একে বলে viewport-এর scroller.

এই কারণেই এই পর্বের লাইভ এডিটরগুলোর ভেতরে নির্দিষ্ট উচ্চতার বাক্স (যেমন height: 240px; overflow-y: auto) রাখা হয়েছে। প্রিভিউ-ফ্রেমের ভেতরে সেই বাক্সই আপনার “ছোট পাতা”। মাউসের চাকা, টাচপ্যাড বা আঙুল দিয়ে বাক্সের ভেতরে স্ক্রল করে প্রতিটি ইফেক্ট নিজে পরীক্ষা করবেন। একটি বাক্স কিবোর্ড দিয়ে স্ক্রল করতে চাইলে Tab চেপে সেটিতে focus আনুন, তারপর তীর-কী (arrow key) বা Space চাপুন।

২ · মসৃণ স্ক্রল আর লক্ষ্যের সামনে খালি জায়গা

পাতার ওপরের মেনুতে “দাম” লিংকে চাপলেন। ডিফল্টে ব্রাউজার চোখের পলকে লাফিয়ে সেখানে চলে যায়। লম্বা পাতায় এতে পাঠক বুঝতে পারেন না তিনি পাতার কোন অংশে এলেন — মনে হয় হঠাৎ অন্য পাতা খুলে গেল। scroll-behavior: smooth এই লাফটিকে অল্প সময়ের একটি মসৃণ যাত্রায় বদলে দেয়। এটি লিংকের #id, JavaScript-এর scrollIntoView() বা scrollTo() — সব ধরনের “প্রোগ্রাম দিয়ে করা” স্ক্রলে খাটে। ব্যবহারকারী নিজে চাকা ঘোরালে বা আঙুল টানলে এর কোনো প্রভাব নেই।

কিন্তু মসৃণ যাত্রা সবার জন্য আরামের নয়। যাঁদের ভেতরের কানের ভারসাম্যজনিত সমস্যা (vestibular disorder) আছে, বড় দূরত্বের গড়ানো স্ক্রল তাঁদের মাথা ঘোরাতে পারে। তাই পেশাদার নিয়ম হলো, মসৃণ স্ক্রল দিন শুধু তখন, যখন ব্যবহারকারী অপারেটিং সিস্টেমে “অ্যানিমেশন কমান” চালু করেননি — অর্থাৎ prefers-reduced-motion-এর মান no-preference হলে।

দ্বিতীয় সমস্যাটি পর্ব ২৪-এ দেখেছিলেন: sticky বা fixed header থাকলে লিংকে চাপার পর শিরোনামটি header-এর নিচে ঢাকা পড়ে যায়। কারণ ব্রাউজার লক্ষ্যকে স্ক্রল-জানালার একেবারে ওপরের কিনারায় আনে, আর সেখানে তো header বসে আছে। সমাধান দুটি, দুই দিক থেকে:

নিচের প্রিভিউতে একটি চায়ের দোকানের ছোট পাতা আছে — একটি নির্দিষ্ট উচ্চতার বাক্স, যার ভেতরে কালো sticky header আর তিনটি অংশ। ওপরের লিংকগুলোতে চাপুন:

<style>
  .page { height: 230px; overflow-y: auto; border: 2px solid #94a3b8;
          font-family: sans-serif; scroll-padding-top: 52px; }
  @media (prefers-reduced-motion: no-preference) {
    .page { scroll-behavior: smooth; }
  }
  .top { position: sticky; top: 0; display: flex; gap: 16px;
         padding: 12px; background: #0f172a; }
  .top a { color: #fff; }
  section { padding: 0 12px 170px; }
  h2 { margin: 0; padding-top: 6px; color: #b91c1c; }
</style>
<div class="page" tabindex="0" role="region" aria-label="চায়ের দোকানের পাতা">
  <nav class="top"><a href="#menu">মেনু</a> <a href="#price">দাম</a> <a href="#contact">যোগাযোগ</a></nav>
  <section id="menu"><h2>মেনু</h2><p>দুধ চা, রং চা, আদা চা, সিঙ্গারা আর পুরি।</p></section>
  <section id="price"><h2>দাম</h2><p>দুধ চা ১৫ টাকা, রং চা ১০ টাকা, সিঙ্গারা ১০ টাকা।</p></section>
  <section id="contact"><h2>যোগাযোগ</h2><p>নিউ মার্কেটের পাশে, সকাল ৭টা থেকে রাত ১১টা।</p></section>
</div>

৩ · Scroll snap — খাঁজে খাঁজে থামা স্ক্রল

অনলাইন দোকানের অ্যাপে “নতুন পণ্য” সারিটি আঙুলে টানলে পণ্যের কার্ড একটা একটা করে ঠিক জায়গায় এসে থামে — আধখানা কার্ড কেটে থাকে না। আগে এই কাজে Slick বা Swiper-এর মতো JavaScript লাইব্রেরি লাগত: স্ক্রল থামার পর হিসাব করে বাক্সটিকে নিকটতম কার্ডে টেনে নিয়ে যাওয়া। এখন CSS-এর scroll snap সেই কাজটি ব্রাউজারের নিজস্ব স্ক্রল-যন্ত্রের ভেতরেই করে।

নিচের ডায়াগ্রামে ধাপে ধাপে দেখুন, প্রতিটি লাইন যোগ করলে ব্রাউজারের হিসাব কীভাবে বদলায়:

1.shelf {2  display: flex; overflow-x: auto;3  scroll-snap-type: x mandatory;4  scroll-padding-inline: 16px;5}6.item {7  scroll-snap-align: start;8  scroll-snap-stop: always;9}

এবার আসল carousel. বাক্সের ভেতরে আড়াআড়ি স্ক্রল করুন — টাচপ্যাডে দুই আঙুলে পাশে টানুন, মাউসে Shift চেপে চাকা ঘোরান, বা Tab দিয়ে সারিটিতে focus এনে ← → চাপুন:

<style>
  .shelf { display: flex; gap: 12px; overflow-x: auto; padding: 8px 16px;
           scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }
  .item  { flex: 0 0 70%; height: 130px; border-radius: 12px;
           scroll-snap-align: start;
           display: grid; place-items: center;
           font: 700 20px sans-serif; color: #fff; background: #0e7490; }
  .item:nth-child(even) { background: #7c3aed; }
  .shelf:focus-visible { outline: 3px solid #f59e0b; }
</style>
<h3>নতুন পণ্য</h3>
<div class="shelf" tabindex="0" role="region" aria-label="নতুন পণ্য, আড়াআড়ি স্ক্রল করুন">
  <div class="item">👕 টি-শার্ট ৳৪৫০</div>
  <div class="item">👟 কেডস ৳১,২০০</div>
  <div class="item">🎒 ব্যাগ ৳৯৫০</div>
  <div class="item">⌚ ঘড়ি ৳২,৩০০</div>
  <div class="item">🧢 টুপি ৳২৫০</div>
</div>

পুরো-পর্দার গল্প — খাড়া snap আর scroll-snap-stop

অনেক সংবাদমাধ্যম বড় প্রতিবেদন “স্ক্রল করে পড়ার গল্প” হিসেবে সাজায়: প্রতিটি স্ক্রলে পর্দা-ভরা একটি নতুন দৃশ্য। নিচে রাজশাহীর আমের ঢাকার টেবিলে পৌঁছানোর গল্প — একটি খাড়া snap container, যার প্রতিটি অংশ বাক্সের পুরো উচ্চতা নেয়:

<style>
  .story { height: 240px; overflow-y: auto; scroll-snap-type: y mandatory; }
  .story section {
    height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
    display: grid; place-items: center; padding: 0 16px;
    font: 700 21px sans-serif; color: #fff; text-align: center;
  }
  .story section:nth-child(1) { background: #15803d; }
  .story section:nth-child(2) { background: #ca8a04; }
  .story section:nth-child(3) { background: #c2410c; }
  .story section:nth-child(4) { background: #1d4ed8; }
  .story:focus-visible { outline: 3px solid #f59e0b; }
</style>
<div class="story" tabindex="0" role="region" aria-label="আমের যাত্রার গল্প">
  <section>১ · ভোরে রাজশাহীর বাগানে আম পাড়া</section>
  <section>২ · আড়তে বাছাই আর ঝুড়িতে সাজানো</section>
  <section>৩ · রাতের ট্রাকে ঢাকার পথে</section>
  <section>৪ · কারওয়ান বাজার থেকে আপনার টেবিলে</section>
</div>

শেষ পরীক্ষাটির পেছনে spec-এর একটি গুরুত্বপূর্ণ নিয়ম আছে: কোনো snap অংশ snapport-এর চেয়ে বড় হলে ব্রাউজারকে তার ভেতরে মুক্তভাবে স্ক্রল করতে দিতে হয়, নইলে লেখার মাঝের অংশ কখনো পড়াই যেত না। তবু ফোনে লম্বা লেখা আর mandatory একসাথে ঝুঁকিপূর্ণ — পর্দা ছোট হলে প্রায় প্রতিটি অংশই “বাক্সের চেয়ে বড়” হয়ে যায়, আর স্ক্রল অদ্ভুত লাগে। লেখাভরা অংশে proximity বেছে নিন।

৪ · overscroll-behavior — স্ক্রল যেন পাশের বাক্সে না গড়ায়

bKash বা অনলাইন দোকানের সাইটে সাহায্যের চ্যাট বক্স খুলে পুরোনো মেসেজ পড়তে ওপরে স্ক্রল করছেন। চ্যাটের একেবারে শুরুতে পৌঁছে আরও একটু ঘোরালেন — আর হঠাৎ পেছনের পুরো পাতাটা নড়ে উঠল! একে বলে scroll chaining: একটি scroll container তার সীমানায় পৌঁছালে বাড়তি স্ক্রল তার বাইরের scroll container-এর হাতে চলে যায়, শিকলের মতো।

সাধারণ পাতায় এটি সুবিধাজনক — ছোট একটি টেবিল-বাক্সের শেষে পৌঁছে আপনি পাতা নিচে নামাতে চান। কিন্তু চ্যাট বক্স, modal, পাশের মেনু বা ম্যাপে এটি বিরক্তিকর। overscroll-behavior ধারককে বলে দেয়, সীমানায় পৌঁছে কী করবে:

নিচে একটি “পাতা” (বাইরের বাক্স) আর তার ওপরে পাশাপাশি দুটি চ্যাট বক্স। দুটি চ্যাটেই মাউস রেখে স্ক্রল করে একেবারে নিচে নামুন, তারপর আরও ঘোরাতে থাকুন:

<style>
  .page  { height: 270px; overflow-y: auto; border: 2px solid #94a3b8;
           padding: 10px; font-family: sans-serif; }
  .chats { display: flex; gap: 10px; }
  .chat  { flex: 1; height: 120px; overflow-y: auto; padding: 6px;
           border: 2px solid #b91c1c; }
  .chat p { margin: 0 0 6px; padding: 4px 8px; border-radius: 8px; background: #e0f2fe; }
  .safe  { overscroll-behavior: contain; border-color: #15803d; }
  .rest  { height: 480px; margin-top: 10px; padding: 8px;
           background: linear-gradient(#f8fafc, #94a3b8); }
</style>
<div class="page" tabindex="0" role="region" aria-label="পুরো পাতা">
  <div class="chats">
    <div class="chat" tabindex="0" role="region" aria-label="চ্যাট, contain ছাড়া">
      <b>সাধারণ</b><p>হ্যালো!</p><p>অর্ডার কোথায়?</p><p>দেখছি…</p><p>পথে আছে</p><p>ধন্যবাদ</p>
    </div>
    <div class="chat safe" tabindex="0" role="region" aria-label="চ্যাট, contain সহ">
      <b>contain</b><p>হ্যালো!</p><p>অর্ডার কোথায়?</p><p>দেখছি…</p><p>পথে আছে</p><p>ধন্যবাদ</p>
    </div>
  </div>
  <div class="rest">বাকি পাতা — এখানে নিচে আরও অনেক কিছু…</div>
</div>

Pull-to-refresh আর পুরো পাতার overscroll

ফোনের Chrome-এ পাতার একেবারে ওপরে থেকে আঙুল নিচে টানলে একটি ঘোরানো চিহ্ন এসে পাতা নতুন করে লোড হয় — একে বলে pull-to-refresh. চ্যাট অ্যাপ বা আঁকার অ্যাপের মতো ওয়েব অ্যাপে এটি বিপদ: ব্যবহারকারী আঁকতে গিয়ে নিচে টানলেন, আর পাতা রিলোড হয়ে সব কাজ হারিয়ে গেল। পুরো পাতার overscroll-এর মালিক রুট element, তাই নিয়মটি সেখানে লিখতে হয়:

/* আঁকার অ্যাপ, ম্যাপ বা নিজের "টেনে রিফ্রেশ" বানানো অ্যাপে */
html {
  overscroll-behavior-y: contain;   /* বা none */
}

overscroll-behavior সব প্রধান ব্রাউজারে আছে — Baseline Widely available. তবে খেয়াল রাখুন: কোন ব্রাউজার আদৌ pull-to-refresh বা সীমানার ঝাঁকুনি (bounce) দেখায়, সেটি ব্রাউজার ও ডিভাইসভেদে আলাদা। সাধারণ তথ্যভিত্তিক পাতায় এটি বন্ধ করবেন না — মানুষ রিফ্রেশের এই অভ্যাসে অভ্যস্ত।

৫ · স্ক্রলবার সাজানো — মানসম্মত পথ বনাম পুরোনো কৌশল

সাইটের রং সবুজ, অথচ পাশের ছোট বাক্সের স্ক্রলবার ধূসর আর মোটা — ডিজাইনাররা প্রায়ই এটি বদলাতে চান। এর দুটি পথ আছে, আর দুটির ইতিহাস ও মর্যাদা আলাদা:

.box {
  height: 70px; overflow-y: auto; margin-bottom: 12px; padding: 8px;
  border: 2px solid #94a3b8; font-family: sans-serif;
  scrollbar-gutter: stable;           /* স্ক্রলবারের জায়গা আগেই রাখা */
}
/* মানসম্মত পথ */
.std { scrollbar-width: thin; scrollbar-color: #0e7490 #e0f2fe; }

/* পুরোনো, অমানক পথ */
.old::-webkit-scrollbar       { width: 14px; }
.old::-webkit-scrollbar-track { background: #fef3c7; }
.old::-webkit-scrollbar-thumb { background: #b45309; border-radius: 7px;
                                border: 3px solid #fef3c7; }

সাপোর্টের সৎ ছবি: Firefox এই দুটি মানসম্মত property অনেক বছর আগে চালু করে; Chromium যোগ দেয় ২০২৪ সালের শুরুতে। Safari প্রথমে scrollbar-width আনে (২০২৪-এর শেষে, ফলে এটি Baseline Newly available), আর scrollbar-color Safari-তে আসছে তারও পরে — কাজে লাগানোর আগে Can I use-এ বর্তমান অবস্থা দেখে নিন। সুখবর হলো, যে ব্রাউজার চেনে না, সে শুধু সাধারণ স্ক্রলবার দেখায় — কিছুই ভাঙে না।

scrollbar-gutter: stable পর্ব ২৩-এ দেখেছেন: স্ক্রলবারের জায়গা আগেই খালি রাখে, তাই লেখা বাড়তে বাড়তে হঠাৎ স্ক্রলবার এলে কনটেন্ট পাশে লাফায় না। সাজানো স্ক্রলবারের সাথে এটি প্রায় সবসময় জোড়ায় লিখুন।

৬ · Scroll-driven animation — ঘড়ির বদলে স্ক্রল

পর্ব ৩৯-এ দেখেছেন, @keyframes দিয়ে লেখা animation একটি ঘড়ি ধরে চলে: 2s দিলে দুই সেকেন্ডে শুরু থেকে শেষ। এই ঘড়িকে বলে timeline — ডিফল্টে সেটি পাতার সময়রেখা (document timeline). Scroll-driven animation-এর মূল চিন্তা এক লাইনের: ঘড়িটা খুলে ফেলে তার জায়গায় স্ক্রলবার বসিয়ে দিন। স্ক্রল ০% হলে animation-এর শুরু, স্ক্রল ১০০% হলে শেষ; পাঠক উল্টো দিকে স্ক্রল করলে animation-ও উল্টো দিকে চলে।

CSS দুই রকম স্ক্রল-ঘড়ি দেয়:

• Scroll progress timeline — scroll(): একটি scroll container কতটা স্ক্রল হয়েছে, ০% থেকে ১০০%. পড়ার অগ্রগতির দাগের (reading progress bar) জন্য আদর্শ।
• View progress timeline — view(): একটি নির্দিষ্ট element স্ক্রল-জানালায় কতটা দেখা যাচ্ছে — ঢোকা থেকে বেরিয়ে যাওয়া পর্যন্ত। কার্ড বা ছবি পর্দায় ঢোকার সময় ফুটে ওঠার (fade-in) জন্য আদর্শ।

প্রথমে scroll()-এর ভেতরের হিসাবটি ধাপে ধাপে দেখুন। ধরুন একটি প্রবন্ধ-বাক্সে মোট স্ক্রল করার জায়গা 600px:

1@keyframes grow {2  from { transform: scaleX(0); }3  to   { transform: scaleX(1); }4}5.bar {6  animation: grow linear both;7  animation-timeline: scroll(nearest block);8}

এবার চালিয়ে দেখুন। সবুজ দাগটি প্রবন্ধ-বাক্সের ভেতরে sticky — তাই সে এই বাক্সেরই নিকটতম scroller খুঁজে পায়:

<style>
  .article { height: 150px; overflow-y: auto; border: 2px solid #94a3b8;
             font-family: sans-serif; line-height: 1.7; }
  .article p { margin: 12px; }
  .bar  { position: sticky; top: 0; height: 8px; background: #16a34a;
          transform-origin: 0 50%; display: none; }
  .note { color: #b91c1c; }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @supports (animation-timeline: scroll()) {
    .bar  { display: block; animation: grow linear both;
            animation-timeline: scroll(nearest block); }
    .note { display: none; }
  }
</style>
<p class="note">আপনার ব্রাউজার scroll-driven animation চেনে না — লেখা পড়া যাবে, শুধু অগ্রগতির দাগ দেখাবে না।</p>
<div class="article" tabindex="0" role="region" aria-label="প্রবন্ধ: পদ্মা নদী">
  <div class="bar"></div>
  <p>পদ্মা হিমালয় থেকে নেমে আসা গঙ্গার মূল ধারা, যা বাংলাদেশে ঢুকে পদ্মা নাম নেয়।</p>
  <p>গোয়ালন্দের কাছে যমুনা এসে মেলে, আর চাঁদপুরের কাছে মেঘনার সাথে মিলে সে সাগরের দিকে যায়।</p>
  <p>বর্ষায় পদ্মা কয়েক কিলোমিটার চওড়া হয়ে যায়, আর তার ভাঙনে প্রতি বছর বহু গ্রাম নদীতে হারায়।</p>
  <p>ইলিশ, পলিমাটি আর নৌকার গান — পদ্মা এ দেশের অর্থনীতি আর সাহিত্য দুটোরই অংশ।</p>
  <p>রাজশাহী, পাবনা, কুষ্টিয়া, ফরিদপুর আর শরীয়তপুরের মতো বহু জেলা পদ্মার তীরে।</p>
  <p>২০২২ সালে পদ্মা সেতু খুলে দেওয়ায় দক্ষিণ-পশ্চিমের জেলাগুলোর সাথে ঢাকার যাতায়াত অনেক সহজ হয়েছে।</p>
</div>

view() আর animation-range — কোন অংশে animation চলবে

view()-এর ঘড়ি একটি element-এর পুরো “পর্দা-যাত্রা” মাপে: তার ওপরের কিনারা জানালার নিচ দিয়ে ঢোকার মুহূর্ত (০%) থেকে তার নিচের কিনারা জানালার ওপর দিয়ে বেরিয়ে যাওয়া (১০০%) পর্যন্ত। কিন্তু fade-in-এর জন্য আমরা পুরো যাত্রা চাই না — শুধু ঢোকার অংশটুকু। সেটাই বলে দেয় animation-range. নিচের ডায়াগ্রামে একটি কার্ডের যাত্রা দেখুন:

<style>
  .feed { height: 220px; overflow-y: auto; padding: 10px;
          border: 2px solid #94a3b8; font-family: sans-serif; }
  .card { height: 80px; margin-bottom: 14px; border-radius: 12px;
          display: grid; place-items: center; font-size: 18px; background: #fde68a; }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(40px) scale(0.9); }
    to   { opacity: 1; transform: none; }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .card { animation: reveal linear both;
              animation-timeline: view();
              animation-range: entry 0% entry 100%; }
    }
  }
</style>
<div class="feed" tabindex="0" role="region" aria-label="খবরের তালিকা">
  <div class="card">🏏 ক্রিকেট</div><div class="card">🌦️ আবহাওয়া</div>
  <div class="card">🚇 মেট্রো রেল</div><div class="card">🌾 কৃষি</div>
  <div class="card">📚 শিক্ষা</div><div class="card">💻 প্রযুক্তি</div>
  <div class="card">🎭 সংস্কৃতি</div><div class="card">🏥 স্বাস্থ্য</div>
</div>

নামওয়ালা timeline — দাগটি যখন বাক্সের বাইরে

scroll(nearest) শুধু নিজের পূর্বপুরুষ scroller-কে চেনে। কিন্তু ধরুন অগ্রগতির দাগটি প্রবন্ধ-বাক্সের বাইরে, পাতার ওপরের header-এ বসবে। তখন scroller-কে একটি নাম দিতে হয়, আর দাগকে বলতে হয় “ওই নামের ঘড়ি ধরো”। দুটি যদি ভাই-বোন বা দূর সম্পর্কের আত্মীয় হয়, তাহলে তাদের সাধারণ পূর্বপুরুষে timeline-scope দিয়ে নামটি “দৃশ্যমান” করতে হয়:

.layout  { timeline-scope: --article; }            /* সাধারণ পূর্বপুরুষ */
.article { overflow-y: auto; scroll-timeline: --article block; }
.bar     { animation: grow linear both;
           animation-timeline: --article; }        /* নাম ধরে ঘড়ি */

/* একইভাবে element-এর পর্দা-যাত্রারও নাম দেওয়া যায় */
.hero-img { view-timeline: --hero; }
.caption  { animation: fade linear both; animation-timeline: --hero; }

এখানে নাম দুই হাইফেন দিয়ে শুরু, custom property-র মতো দেখতে হলেও এটি কোনো variable নয় — একটি named timeline-এর পরিচয়। scroll-timeline হলো scroll()-এর নামওয়ালা রূপ, view-timeline হলো view()-এর।

সাপোর্ট — সৎভাবে

৭ · পুরোনো JavaScript পথ — আর CSS কেন মসৃণ

scroll-driven animation আসার আগে প্রায় দুই দশক ধরে এই কাজগুলো হতো JavaScript-এ। প্রথম যুগের কৌশল ছিল scroll event শোনা: প্রতিবার পাতা একটু নড়লেই একটি ফাংশন চালিয়ে হিসাব করা, তারপর স্টাইল বদলানো।

// পুরোনো কৌশল — শেখার জন্য দেখুন, নতুন কাজে এড়িয়ে চলুন
window.addEventListener('scroll', function () {
  const max = document.documentElement.scrollHeight - innerHeight;
  bar.style.width = (scrollY / max * 100) + '%';   // প্রতি নড়াচড়ায় লেআউট
});

এতে তিনটি সমস্যা। (১) JavaScript চলে ব্রাউজারের main thread-এ — যে একই “কর্মী” ক্লিক সামলায়, লেআউট হিসাব করে, অন্য স্ক্রিপ্ট চালায়। সে ব্যস্ত থাকলে দাগ পিছিয়ে পড়ে, আর পাতা ঝাঁকুনি দিয়ে চলে — একে বলে jank. (২) আধুনিক ব্রাউজার স্ক্রল করে আলাদা একটি thread-এ, তাই scroll event আসে স্ক্রলের পরে — দাগ সবসময় এক ফ্রেম পিছিয়ে থাকে। (৩) width বদলালে প্রতিবার লেআউট নতুন করে হয়।

দ্বিতীয় যুগে এলো IntersectionObserver — ব্রাউজারকে বলে রাখা, “এই element জানালায় ঢুকলে বা বেরোলে আমাকে জানিয়ো।” প্রতি পিক্সেলে নয়, শুধু সীমানা পেরোনোর মুহূর্তে খবর আসে, তাই এটি অনেক দক্ষ। নিচে এর ছোট্ট একটি উদাহরণ — অর্ধেকের বেশি দেখা গেলে কার্ডে seen class বসে:

<style>
  .feed { height: 180px; overflow-y: auto; padding: 10px;
          border: 2px solid #94a3b8; font-family: sans-serif; }
  .card { height: 70px; margin-bottom: 12px; border-radius: 10px; display: grid;
          place-items: center; background: #bfdbfe; opacity: 0.2; transition: opacity 0.5s; }
  .card.seen { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .card { transition: none; } }
</style>
<div class="feed" id="feed" tabindex="0" role="region" aria-label="কার্ডের তালিকা">
  <div class="card">ঢাকা</div><div class="card">চট্টগ্রাম</div><div class="card">খুলনা</div>
  <div class="card">রাজশাহী</div><div class="card">সিলেট</div><div class="card">বরিশাল</div>
</div>
<script>
  const feed = document.getElementById('feed');
  const io = new IntersectionObserver(function (entries) {
    entries.forEach(function (e) {
      if (!e.isIntersecting) return;
      e.target.classList.add('seen');
      io.unobserve(e.target);              // একবার দেখা হলেই যথেষ্ট
      console.log('দেখা গেল: ' + e.target.textContent);
    });
  }, { root: feed, threshold: 0 });
  feed.querySelectorAll('.card').forEach(function (c) { io.observe(c); });
</script>

তাহলে CSS কেন আরও মসৃণ? animation-timeline দিয়ে transform আর opacity animate করলে ব্রাউজার পুরো হিসাবটা স্ক্রলের সাথে একই জায়গায় — compositing-এর ধাপে, প্রায়ই আলাদা thread-এ — করতে পারে। main thread ভারী JavaScript-এ আটকে থাকলেও দাগ আঙুলের সাথে তাল মিলিয়ে চলে। IntersectionObserver এখনো খুব কাজের: lazy loading, “পাঠক এই অংশ দেখেছেন” হিসাব, অসীম স্ক্রলের পরের পাতা আনা — যেখানে animation নয়, একটি সিদ্ধান্ত দরকার। এটি বহু বছর ধরে সব ব্রাউজারে আছে — Baseline Widely available. JavaScript-এর event নিয়ে আরও জানতে দেখুন JavaScript কোর্সের event-এর পর্ব.

৮ · Parallax, carousel আর সবার জন্য স্ক্রল

Parallax হলো সেই ইফেক্ট, যেখানে পেছনের ছবি সামনের লেখার চেয়ে ধীরে সরে — ট্রেনের জানালা দিয়ে দূরের পাহাড় ধীরে আর কাছের গাছ দ্রুত সরে যাওয়ার মতো। এতে গভীরতার অনুভূতি আসে। scroll-driven animation দিয়ে এটি এখন খুব সহজ:

@keyframes drift { from { transform: translateY(-15%); } to { transform: translateY(15%); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-bg { animation: drift linear both; animation-timeline: view(); }
  }
}

কিন্তু সহজ বলেই বেশি ব্যবহারের ঝুঁকি। পর্দার বড় অংশ জুড়ে বিভিন্ন গতিতে জিনিস সরলে vestibular disorder, মাইগ্রেন বা মোশন সিকনেস আছে এমন মানুষের মাথা ঘোরা, বমিভাব হতে পারে। WCAG 2.2-এর একটি নির্দেশিকা (2.3.3 Animation from Interactions, স্তর AAA) বলে: ব্যবহারকারীর ক্রিয়া থেকে শুরু হওয়া অপ্রয়োজনীয় নড়াচড়া বন্ধ করার উপায় থাকতে হবে। তাই parallax ছোট রাখুন (১০–২০%-এর মধ্যে), পুরো পাতায় নয়, একটি-দুটি জায়গায় দিন, আর সবসময় reduced motion-এর ভেতরে রাখুন। পর্ব ৪৫-এ reduced motion নিয়ে আরও বিস্তারিত থাকবে।

Snap carousel কিবোর্ড আর screen reader-এ

একটি স্ক্রল-বাক্স মাউস ও আঙুলে চলে ঠিকই, কিন্তু যিনি শুধু কিবোর্ড ব্যবহার করেন, তিনি কীভাবে স্ক্রল করবেন? কিবোর্ডে স্ক্রল করতে বাক্সটিতে আগে focus আনতে হয়। ভেতরে লিংক বা বোতাম থাকলে Tab চাপলে সেগুলোয় focus যায়, আর ব্রাউজার নিজেই বাক্সটি স্ক্রল করে focus পাওয়া জিনিস দেখায়। কিন্তু ভেতরে শুধু লেখা বা ছবি থাকলে? তখন বাক্সটিকেই focus পাওয়ার যোগ্য করতে হয়। এই পর্বের প্রতিটি এডিটরে তাই এই তিনটি জিনিস দেখেছেন:

<div class="shelf" tabindex="0" role="region" aria-label="নতুন পণ্য">
  …কার্ডগুলো…
</div>

• tabindex="0" — বাক্সটি Tab-এর ক্রমে আসে, focus পেলে তীর-কী দিয়ে স্ক্রল করা যায়। কিছু ব্রাউজার আজকাল কনটেন্ট-ভরা scroller-কে নিজে থেকেই focusable করে, কিন্তু সবাই নয় — তাই নিজে লিখে দেওয়াই নিরাপদ।
• role="region" + aria-label — focus পেলে screen reader বলে “নতুন পণ্য, অঞ্চল”। নাম ছাড়া focus পাওয়া একটি নামহীন বাক্স শ্রোতার কাছে অর্থহীন। ARIA-র প্রথম নিয়ম মনে রাখুন: <section>-এর মতো উপযুক্ত HTML থাকলে আগে সেটি ব্যবহার করুন; এখানে একটি সাধারণ <div>-কে নাম দিচ্ছি বলে role লাগছে।
• :focus-visible outline — focus কোথায় আছে, চোখে দেখা যাওয়া চাই।

আরও কয়েকটি নিয়ম: carousel নিজে নিজে ঘুরলে (auto-play) থামানোর বোতাম দিন — WCAG 2.2.2 (Pause, Stop, Hide) পাঁচ সেকেন্ডের বেশি চলা নড়াচড়ার জন্য এটি দাবি করে। স্ক্রলের স্বাভাবিক আচরণ ছিনিয়ে নেবেন না — চাকা একটু ঘোরালে পুরো পাতা জোর করে পরের অংশে নিয়ে যাওয়ার নাম scroll hijacking, যা প্রায় সবাই অপছন্দ করেন। আর carousel-এর প্রথম স্লাইডের পরের জিনিসগুলো অনেকেই দেখেন না — গুরুত্বপূর্ণ তথ্য কখনো শুধু carousel-এর ভেতরে লুকাবেন না।

৯ · AI-এর যুগে স্ক্রল ইফেক্ট

AI-কে “একটি সুন্দর স্ক্রল অ্যানিমেশন বানিয়ে দাও” বললে সাধারণত দুই রকম উত্তর আসে: হয় পুরোনো scroll event-ভিত্তিক JavaScript আর GSAP-এর মতো বড় লাইব্রেরি, নয়তো একেবারে নতুন CSS — কিন্তু কোনো @supports বা reduced motion ছাড়া। দুটিতেই আপনার যাচাই দরকার।

AI-এর লেখা স্ক্রল-কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• অপারেটিং সিস্টেমে “অ্যানিমেশন কমান” চালু করে (বা DevTools-এর Rendering প্যানেলে prefers-reduced-motion নকল করে) দেখেছি — নড়াচড়া থামে, কনটেন্ট দৃশ্যমান থাকে
• Firefox-এ খুলে দেখেছি — scroll-driven animation না চললেও কোনো কনটেন্ট অদৃশ্য বা ভাঙা নয়
• শুধু কিবোর্ড দিয়ে (Tab, তীর-কী, Space) প্রতিটি স্ক্রল-বাক্স আর carousel চালাতে পেরেছি, focus চোখে দেখা যায়
• MDN আর Can I use-এ প্রতিটি নতুন property-র বর্তমান Baseline অবস্থা মিলিয়েছি — AI-এর পুরোনো তথ্যে ভরসা করিনি
• DevTools-এর Performance প্যানেলে স্ক্রল রেকর্ড করে দেখেছি লম্বা লাল task বা ঝাঁকুনি নেই; Lighthouse-এ অ্যাক্সেসিবিলিটি সমস্যা নেই, আর validator.w3.org-এ HTML পরিষ্কার