CSS overscroll-behavior অপারিটা

সংজ্ঞা ও ব্যবহার

overscroll-behavior প্রতিশব্দ স্ক্রোল চেইন (scroll chaining) বা অতিরিক্ত স্ক্রোল ফিডব্যাক (overscroll affordance) কে বন্ধ করার জন্য সম্পূর্ণ প্রতিশব্দ ব্যবহার করা হয়, যখন স্ক্রোল সীমানা ছাড়া স্ক্রোল করা হয়。

স্ক্রোল চেইন: একটি ইলেকট্রনমেন্টের ওপর অতিরিক্ত স্ক্রোল করার ফলে, পিতৃ ইলেকট্রনমেন্টের স্ক্রোল আচরণকে প্রভাবিত করে।এটি ডিফল্ট আচরণ।

অতিরিক্ত স্ক্রোল ফিডব্যাক: যখন স্ক্রোল সীমানা ছাড়া স্ক্রোল করার চেষ্টা করা হয়, তখন ব্যবহারকারীকে প্রদান করা ফিডব্যাক।উদাহরণস্বরূপ, মোবাইল ডিভাইসে পাতার শীর্ষ থেকে স্ক্রোল করার চেষ্টা করা হলে, সাধারণত ভিস্যুয়াল ফিডব্যাক দেখা যায় এবং পাতা ফ্রিশ করা হয়。

overscroll-behavior প্রতিমাণ্যটি নিম্নলিখিত প্রতিমাণ্যগুলির সংক্ষিপ্ত রূপ।

overscroll-behavior প্রতিমাণ্যের মানকে বিভিন্নভাবে সংযোজিত করা যেতে পারে:

যদি overscroll-behavior প্রতিমাণ্যকে দুটি মান থাকে:

overscroll-behavior: none contain;
  • x-দিক: কোনো অতিরিক্ত স্ক্রোলিং আচরণ নেই
  • y-দিক: কোনো স্ক্রোলিং চেইন নেই, কিন্তু অতিরিক্ত স্ক্রোলিং ফিডব্যাককে অপমন্য করা হয়

যদি overscroll-behavior প্রতিমাণ্যকে একটি মান থাকে:

overscroll-behavior: contain;
  • x ও y-দিক: কোনো স্ক্রোলিং চেইন নেই, কিন্তু অতিরিক্ত স্ক্রোলিং ফিডব্যাককে অপমন্য করা হয়

প্রতিমাণ্য

উদাহরণ 1

স্ক্রোলিং থাকা <div> ইলাকার স্ক্রোলিং চেইনকে বন্ধ করুন:

#yellowDiv {
  overscroll-behavior: contain;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 2: দ্বিমানক গঠনশৈলী:

এটিকে overscroll-behavior প্রতিমাণ্য মান সংযোজিত করা হয়: auto noneস্ক্রোলিং চেইনকে x-দিকে অপমন্য করুন, কিন্তু y-দিকে অপমন্য না:

#pinkDiv {
  overscroll-behavior: auto none;
}

আপনার নিজেই প্রয়াস করুন

CSS গঠনশৈলী

overscroll-behavior: auto|contain|none|initial|inherit;

প্রতিমাণ্য

মান বর্ণনা
auto স্ক্রোলিং চেইন ও অতিরিক্ত স্ক্রোলিং ফিডব্যাক আচরণকে অপমন্য করুন। ডিফল্ট মান。
contain অতিরিক্ত স্ক্রোলিং ফিডব্যাক আচরণকে অপমন্য করুন, কিন্তু স্ক্রোলিং চেইনকে অপমন্য করুন না。
none অতিরিক্ত স্ক্রোলিং ফিডব্যাক বা স্ক্রোলিং চেইন আচরণকে অপমন্য করুন。
initial এই প্রতিমাণ্যকে তার ডিফল্ট মানে সংযোজিত করুন। দেখুন initial
inherit এই প্রতিমাণ্যকে তার পিতৃত্ব প্রতিমাণ্য থেকে উত্তরসূরী করুন। দেখুন inherit

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: auto
উত্তরসূরীতা: না
অ্যানিমেশন নির্মাণ: সমর্থিত নয়। দেখুন:অ্যানিমেশন সংক্রান্ত প্রতিমাণ্য
সংস্করণ: CSS3
জেভাস্ক্রিপ্ট গঠনশৈলী: object.style.overscrollBehavior="none"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম এই প্রতিমাণ্যকে সম্পূর্ণভাবে সমর্থনকারী ব্রাউজারের সংস্করণকে নির্দেশ করে。

চ্রোম এডজেক্স ফায়ারফক্স স্যাফারি ওপেরা
63.0 18.0 * 59.0 16.0 50.0

* মাইক্রোসফট এডজেক্সে, 'none' প্রতিমাণ্য 'contain' হিসাবে পদক্ষেপ নেয়, এটি সঠিক নয়。

সংশ্লিষ্ট পৃষ্ঠা

উল্লেখ:CSS overscroll-behavior-x অপারিটা

উল্লেখ:CSS overscroll-behavior-y অপারিটা

উল্লেখ:CSS scroll-behavior অপারিটা

উল্লেখ:CSS scroll-margin অপারিটা

উল্লেখ:CSS scroll-padding প্রতিশব্দ

উল্লেখ:CSS scroll-snap-align প্রতিশব্দ