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

টিএল; ডিআর

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

পটভূমি

স্ক্রোল সীমানা এবং স্ক্রোল চেইনিং

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

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

টান-টু-রিফ্রেশ প্রভাব

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

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

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

overscroll-behavior প্রবর্তন করা হচ্ছে

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

সম্পত্তি তিনটি সম্ভাব্য মান লাগে:

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

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="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

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

<script>
  let _startY;
  const inbox = document.querySelector('#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.classList.contains('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 ছাড়া অর্জন করা কঠিন হতো।