CSS scroll-snap-type کا کیچن

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

scroll-snap-type موصوفات مشخص می‌کند که عناصر چگونه و به کدام جهت به فکر جذب می‌شوند، وقتی شما رول را متوقف می‌کنید.

برای انجام رفتار جاذبه اسکرول، باید این ویژگی را در عنصر پدر تنظیم کنید. scroll-snap-type ویژگی، و آن را در عنصر فرزند تنظیم کنید scroll-snap-align ویژگی.

مثال

مثال 1

افکت جاذبه اسکرول را در محور x تنظیم می‌کند:

#container {
  scroll-snap-type: x mandatory;
}

آزمایش کنید

مثال 2: تنظیم رفتار جاذبه در محور x و y

افکت جاذبه اسکرول را در محور x و y تنظیم می‌کند. scroll-snap-type ویژگی:

#container > div {
  scroll-snap-type: both mandatory;
}





آزمایش کنید

مثال 3: رفتار جاذبه با نزدیکی

افکت جاذبه اسکرول با رفتار نزدیک به محور x و y تنظیم می‌کند. scroll-snap-type ویژگی. هنگامی که عملیات اسکرول دقیقاً در وسط دو عنصر متوقف می‌شود، جاذبه انجام نمی‌شود:

#container > div {
  scroll-snap-type: both proximity;
}





آزمایش کنید

آموزش نحوی CSS

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

مقدار ویژگی

مقدار توضیحات
none بدون افکت جاذبه اسکرول. مقدار پیش‌فرض.
x افکت جاذبه اسکرول را در محور x تنظیم می‌کند.
y افکت جاذبه اسکرول را در محور y تنظیم می‌کند.
block افکت جاذبه اسکرول را در جهت بلوک تنظیم می‌کند.
inline افکت جاذبه اسکرول را در جهت خطی تنظیم می‌کند.
both افکت جاذبه اسکرول را در محور x و y تنظیم می‌کند.
mandatory پس از اتمام عملیات اسکرول، اسکرول به طور خودکار به نقطه جاذبه حرکت می‌کند.
proximity

مانند mandatory است، اما کمتر سختگیرانه است.

پس از اتمام عملیات اسکرول، اسکرول به طور خودکار به نقطه جاذبه حرکت می‌کند، اما بین نقطه‌های جاذبه یک منطقه‌ای بدون اثر جاذبه وجود دارد.

بستگی به پارامترهای مرورگر دارد.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. ببینید: initial.
inherit این ویژگی را از عنصر پدر خود ارث می‌برد. ببینید: inherit.

جزئیات فنی

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

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

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

کروم ایج فایرفاکس سرافی آپرا
69.0 79.0 99.0 11.0 56.0

متعلقہ صفحات

مطابقت:CSS scroll-snap-align کا کیچن