ویژگی overscroll-behavior-block CSS

تعریف و استفاده

overscroll-behavior-block ویژگی برای غیرفعال کردن زنجیره‌ی اسکرول (scroll chaining) یا بازخورد اسکرول بیش از حد (overscroll affordance) در عناصر، در حالی که سعی می‌شود به محدوده‌ی اسکرول در جهت بلوک بروید، تعریف شده است.

روان‌های چرخش به این معنی است که روانی‌های چرخش در یک عنصر باعث می‌شود که رفتار چرخش پدر آن فعال شود. این رفتار پیش‌فرض است.

بازخورد سوئیچ‌های روانی هنگامی است که کاربر سعی می‌کند به خارج از مرزهای چرخش بروند، بازخورد داده می‌شود. به عنوان مثال، در دستگاه‌های موبایل، هنگامی که سعی می‌کنید به بالای صفحه بروید، معمولاً با بازخورد视觉 از به‌روزرسانی صفحه همراه است.

CSS overscroll-behavior-block و overscroll-behavior-inline ویژگی با overscroll-behavior-x و overscroll-behavior-y ویژگی‌ها بسیار مشابه هستند، اما overscroll-behavior-block و overscroll-behavior-inline ویژگی‌ها بستگی به جهت بلوک و جهت خطی دارند.

توجه داشته باشید:ویژگی‌های CSS مرتبط writing-mode تعریف جهت بلوک. این تأثیر می‌گذارد که جهت بلوک در جهت x یا y است و همچنین overscroll-behavior-block نتیجه ویژگی. برای صفحات انگلیسی، جهت بلوک به سمت پایین است و جهت خطی از چپ به راست است.

مثال

مثال 1

بستن روانی‌های چرخش عنصر <div> در جهت بلوک:

#yellowDiv {
  overscroll-behavior-block: contain;
}

آزمایش کنید

مثال 2: ترکیب ویژگی writing-mode

عنصر <div> را به writing-mode وقتی مقدار ویژگی 'vertical-rl' تنظیم شود، جهت بلوک به جهت x تبدیل می‌شود، بنابراین overscroll-behavior-block حالا در جهت x عمل می‌کند، نه در جهت y:

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-block: contain;
}

آزمایش کنید

نحوه استفاده از زبان برنامه‌نویسی CSS

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

مقدار ویژگی

جزئیات فنی

پشتیبانی مرورگر

تعداد در جدول نشان‌دهنده نسخه مرورگر اولیه‌ای است که این ویژگی را کامل پشتیبانی می‌کند.

صفحات مرتبط

منابع:ویژگی overscroll-behavior CSS

منابع:ویژگی overscroll-behavior-inline CSS

منابع:ویژگی overscroll-behavior-x CSS

منابع:ویژگی overscroll-behavior-y CSS

منابع:ویژگی scroll-behavior CSS

منابع:ویژگی scroll-margin CSS

منابع:ویژگی scroll-padding CSS

منابع:ویژگی scroll-snap-align CSS

منابع:ویژگی writing-mode CSS