আপনার স্ক্রল নিয়ন্ত্রণ করুন - রিফ্রেশ করতে নিচের দিকে টানুন এবং ওভারফ্লো এফেক্ট কাস্টমাইজ করুন

TL;DR

CSS overscroll-behavior প্রপার্টি ডেভেলপারদের কন্টেন্টের উপরে/নিচে পৌঁছানোর সময় ব্রাউজারের ডিফল্ট ওভারফ্লো স্ক্রল আচরণ ওভাররাইড করার অনুমতি দেয়। ব্যবহারের ক্ষেত্রে মোবাইলে রিফ্রেশ করতে নিচের দিকে টানুন ফিচার বন্ধ করা, ওভারস্ক্রল গ্লো এবং রাবারব্যান্ডিং এফেক্ট সরানো এবং পৃষ্ঠার কন্টেন্ট মোডাল/ওভারলের নিচে থাকলে তা স্ক্রল করা আটকানো অন্তর্ভুক্ত।

ব্যাকগ্রাউন্ড

স্ক্রল বাউন্ডারি ও স্ক্রল চেইনিং

স্ক্রল করা হল কোনও পৃষ্ঠার সাথে ইন্টার‍্যাক্ট করার অন্যতম মৌলিক উপায়, কিন্তু ব্রাউজারের অদ্ভুত ডিফল্ট অ্যাকশনের কারণে নির্দিষ্ট কিছু UX প্যাটার্ন ম্যানেজ করা কঠিন হতে পারে। উদাহরণস্বরূপ, এমন একটি অ্যাপ ড্রয়ারের কথা ভাবুন যেখানে অনেক আইটেম আছে এবং ব্যবহারকারীকে সেগুলি স্ক্রল করে দেখতে হয়। তারা নিচে পৌঁছালে, ওভারফ্লো কন্টেনার স্ক্রল করা বন্ধ করে দেয় কারণ দেখার জন্য আর কোনও কন্টেন্ট নেই। অন্যভাবে বলতে গেলে, ব্যবহারকারী "স্ক্রল বাউন্ডারি"-তে পৌঁছে যান। কিন্তু ব্যবহারকারী স্ক্রল করা চালিয়ে গেলে কী হয় তা লক্ষ্য করুন। ড্রয়ারের পিছনে থাকা কন্টেন্ট স্ক্রল করা শুরু হয়! স্ক্রল করার সুবিধা প্যারেন্ট কন্টেনারের মাধ্যমে নিয়ন্ত্রণ করা হয়; উদাহরণে মূল পৃষ্ঠাটিই হল প্যারেন্ট কন্টেনার।

এই আচরণকে স্ক্রল চেইনিং বলা হয়; কন্টেন্ট স্ক্রল করার সময় ব্রাউজারের ডিফল্ট আচরণ। প্রায়ই ডিফল্ট সেটিংস খুব ভালো হয়, কিন্তু কখনও কখনও এটি পছন্দসই বা প্রত্যাশিত হয় না। ব্যবহারকারী স্ক্রল বাউন্ডারিতে পৌঁছালে, কিছু অ্যাপ আলাদা ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে চাইতে পারে।

রিফ্রেশ করতে নিচের দিকে টানার এফেক্ট

রিফ্রেশ করতে নিচের দিকে টানার সুবিধা হল একটি স্বজ্ঞাত জেসচার যা Facebook এবং Twitter-এর মতো মোবাইল অ্যাপের মাধ্যমে জনপ্রিয় হয়েছে। সোশ্যাল ফিড নিচের দিকে টেনে ছেড়ে দিলে, আরও সাম্প্রতিক পোস্ট লোড করার জন্য নতুন স্পেস তৈরি হয়। আসলে, এই নির্দিষ্ট UX এত জনপ্রিয় হয়ে উঠেছে যে Android-এ Chrome-এর মতো মোবাইল ব্রাউজারও একই এফেক্ট গ্রহণ করেছে। পৃষ্ঠার একদম উপরে নিচের দিকে সোয়াইপ করলে পুরো পৃষ্ঠা রিফ্রেশ হয়ে যায়:

Twitter PWA-এর মতো পরিস্থিতির জন্য, নেটিভ 'রিফ্রেশ করতে নিচের দিকে টানুন' অ্যাকশন বন্ধ করা যুক্তিযুক্ত হতে পারে। কেন? এই অ্যাপে, আপনি হয়ত চান না যে ব্যবহারকারী ভুল করে পৃষ্ঠা রিফ্রেশ করে ফেলুন। এছাড়াও, ডবল রিফ্রেশ অ্যানিমেশন দেখার সম্ভাবনাও রয়েছে! অন্যথায়, ব্রাউজারের অ্যাকশন কাস্টমাইজ করা আরও ভালো হতে পারে, এটি সাইটের ব্র্যান্ডিংয়ের সাথে আরও ঘনিষ্ঠভাবে অ্যালাইন করে। দুর্ভাগ্যজনক বিষয় হল, এই ধরনের কাস্টমাইজেশন করা কঠিন। ডেভেলপাররা শেষ পর্যন্ত অপ্রয়োজনীয় জাভাস্ক্রিপ্ট লেখেন, নন-প্যাসিভ টাচ লিসেনার (যা স্ক্রল করা ব্লক করে) যোগ করেন অথবা পুরো পৃষ্ঠাটি ১০০vw/vh-এ <div> (পৃষ্ঠাটি যাতে উপচে না পড়ে তার জন্য) আটকে রাখেন। এইসব ওয়ার্কঅ্যারাউন্ডের স্ক্রলিং পারফর্ম্যান্সের উপর ভালভাবে-ডকুমেন্ট করা নেতিবাচক প্রভাব রয়েছে।

আমরা আরও ভালো করতে পারি!

এসে গেছে overscroll-behavior

overscroll-behavior প্রপার্টি হল একটি নতুন CSS ফিচার যা কোনও কন্টেনার (পৃষ্ঠা সহ) ওভার-স্ক্রল করলে কী হবে তা নিয়ন্ত্রণ করে। আপনি এটি ব্যবহার করে স্ক্রল চেইনিং বাতিল করতে, রিফ্রেশ করতে নিচের দিকে টানুন অ্যাকশন বন্ধ/কাস্টমাইজ করতে, iOS-এ রাবারব্যান্ডিং এফেক্ট বন্ধ করতে (যখন Safari overscroll-behavior প্রয়োগ করে) এবং আরও অনেক কিছু করতে পারেন। সবচেয়ে ভালো বিষয় হল, overscroll-behavior ব্যবহার করলে পৃষ্ঠার পারফর্ম্যান্সের উপর কোনও খারাপ প্রভাব পড়ে না, যেমনটা ভূমিকায় উল্লেখ করা হ্যাকের ক্ষেত্রে হয়!

প্রপার্টিতে তিনটি সম্ভাব্য ভ্যালু থাকে:

1. auto - ডিফল্ট। এলিমেন্টে শুরু হওয়া স্ক্রল পূর্বপুরুষ এলিমেন্টে প্রসারিত হতে পারে।
2. contain - স্ক্রল চেইনিং প্রতিরোধ করে। স্ক্রল পূর্বপুরুষদের কাছে প্রচার করে না তবে নোডের মধ্যে স্থানীয় প্রভাব দেখানো হয়। যেমন, Android-এ ওভারস্ক্রল গ্লো এফেক্ট বা iOS-এ রাবারব্যান্ডিং এফেক্ট, যা ব্যবহারকারীকে স্ক্রল করার সীমানায় পৌঁছে গেলে বিজ্ঞপ্তি দেয়। মনে রাখবেন: html এলিমেন্টে overscroll-behavior: contain ব্যবহার করলে ওভারস্ক্রল নেভিগেশন অ্যাকশন প্রতিরোধ করা যায়।
3. none - contain-এর মতোই, তবে এটি নোডের মধ্যে ওভারস্ক্রল এফেক্টও প্রতিরোধ করে (যেমন, Android ওভারস্ক্রল গ্লো বা iOS রাবারব্যান্ডিং)।

overscroll-behavior কীভাবে ব্যবহার করতে হয় তা দেখতে কিছু উদাহরণ দেখা যাক।

অনড় উপাদান থেকে স্ক্রল এড়িয়ে যাওয়া আটকান

চ্যাটবক্সের দৃশ্যপট

পৃষ্ঠার নিচে স্থির অবস্থানে থাকা চ্যাটবক্সের কথা বিবেচনা করুন। উদ্দেশ্য হল, চ্যাটবক্সটি যেন একটি স্বয়ংসম্পূর্ণ কম্পোনেন্ট হয় এবং এর পিছনে থাকা কন্টেন্ট থেকে আলাদাভাবে স্ক্রল করে। তবে, স্ক্রল চেইনিংয়ের কারণে, ব্যবহারকারী চ্যাট ইতিহাসে শেষ মেসেজে পৌঁছানো মাত্রই ডকুমেন্ট স্ক্রল করা শুরু হয়।

এই অ্যাপের জন্য, চ্যাটবক্সের মধ্যে থেকে শুরু হওয়া স্ক্রলগুলি চ্যাটের মধ্যেই থাকা আরও উপযুক্ত। চ্যাট মেসেজ হোল্ড করে এমন এলিমেন্টে overscroll-behavior: contain যোগ করে আমরা এটি করতে পারি:

#chat .msgs {
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

মূলত, আমরা চ্যাটবক্সের স্ক্রলিং কনটেক্সট এবং মূল পৃষ্ঠার মধ্যে একটি লজিক্যাল বিভাজন তৈরি করছি। এর ফলে, ব্যবহারকারী চ্যাট ইতিহাসের একদম উপরে/নিচে পৌঁছে গেলেও মূল পৃষ্ঠাটি একই জায়গায় থাকে। চ্যাটবক্সে শুরু হওয়া স্ক্রল বাইরে যায় না।

পৃষ্ঠা ওভারলে করার পরিস্থিতি

"আন্ডারস্ক্রল" পরিস্থিতির আরেকটি ধরন হল, যখন আপনি নির্দিষ্ট পজিশন ওভারলে-এর পিছনে কন্টেন্ট স্ক্রল করতে দেখেন। একটি ডেড গিভঅ্যাওয়ে overscroll-behavior অর্ডার করা হয়েছে! ব্রাউজার সাহায্য করার চেষ্টা করছে কিন্তু এর ফলে সাইটটি ত্রুটিপূর্ণ দেখায়।

উদাহরণ - overscroll-behavior: contain সহ ও ছাড়া মোডাল:

'রিফ্রেশ করতে নিচের দিকে টানুন' ফিচার বন্ধ করা হচ্ছে

রিফ্রেশ করতে নিচের দিকে টানার অ্যাকশন বন্ধ করা হল CSS-এর একটি লাইন। শুধু ভিউপোর্ট-ডিফাইনিং এলিমেন্টে স্ক্রল চেইনিং প্রতিরোধ করুন। বেশিরভাগ ক্ষেত্রে, সেটি হল <html> বা <body>:

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

এই সহজ সংযোজনের মাধ্যমে, আমরা চ্যাটবক্স ডেমো-তে ডবল পুল-টু-রিফ্রেশ অ্যানিমেশন ঠিক করি এবং পরিবর্তে, একটি কাস্টম এফেক্ট প্রয়োগ করতে পারি যা একটি আরও পরিষ্কার লোডিং অ্যানিমেশন ব্যবহার করে। ইনবক্স রিফ্রেশ হওয়ার সময় পুরো ইনবক্সও অস্পষ্ট হয়ে যায়:

এখানে সম্পূর্ণ কোডের স্নিপেট দেওয়া হল:

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%;
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refre>she<r"
  div class=&qu><ot;l>oad<ing-bar"/div
  div>< cla>ss=<"loading-bar"></div>
  <div class="loading><-bar>&<quot>;/<div
  div class=&q><uot;loading><-bar&quo>t;</div
/>div

section id="inbox"!-- msgs --/section

script
  let _startY;
  const inbox = document.querySel>ector('#inbox');

  inbox.addEventListener('touchstart', e = {
    _startY = e.touches>[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e = {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container&&
  >  // and &&user is scrolling up.
    if (document.scrollingElement.scrollTop === 0  y  _startY 
        !document.body.class<List.co>ntains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
/script

ওভারস্ক্রল গ্লো ও রাবারব্যান্ডিং এফেক্ট বন্ধ করা হচ্ছে

স্ক্রল বাউন্ডারিতে পৌঁছালে বাউন্স এফেক্ট বন্ধ করতে, overscroll-behavior-y: none ব্যবহার করুন:

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}

সম্পূর্ণ ডেমো

সবকিছু একসাথে করে, সম্পূর্ণ চ্যাটবক্স ডেমো overscroll-behavior ব্যবহার করে কাস্টম পুল-টু-রিফ্রেশ অ্যানিমেশন তৈরি করে এবং চ্যাটবক্স উইজেট থেকে স্ক্রল করার সুবিধা বন্ধ করে দেয়। এটি ব্যবহারকারীকে একটি সর্বোত্তম অভিজ্ঞতা প্রদান করে যা CSS overscroll-behavior ছাড়া অর্জন করা কঠিন হত।