CSS overscroll-behavior-block کا حصہ

定义和用法

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;

مقدار ویژگی

مقدار توضیح
آوتو اجازه می‌دهد که زنجیره‌ای روان‌کننده و بازخورد روان‌کننده وجود داشته باشد. مقدار پیش‌فرض.
کافی اجازه می‌دهد که بازخورد روان‌کننده وجود داشته باشد، اما اجازه نمی‌دهد که زنجیره‌ای روان‌کننده وجود داشته باشد.
هیچ‌چیزی اجازه نمی‌دهد که بازخورد روان‌کننده یا رفتار زنجیره‌ای روان‌کننده وجود داشته باشد.
مقدار اولیه این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به: مقدار اولیه.
ارث‌پذیری این ویژگی را از عنصر پدر خود ارث می‌برد. به: ارث‌پذیری.

جزئیات فنی

مقدار پیش‌فرض: آوتو
ارث‌پذیری: خیر
انیمیشن‌سازی: پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
نوشتار جاوااسکریپت: object.style.overscrollBehaviorBlock="none"

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

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

کروم ایج فائرفاکس سرافی آپرا
63.0 18.0 59.0 16.0 50.0

مطابقت پیج

مطابقت:CSS 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 کا پرزوائز