ویژگی scroll-snap-type CSS

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

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
erbستی: خیر
انیمیشن: پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
قواعد دستور زبان JavaScript: object.style.scrollSnapType="x mandatory"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

صفحات مرتبط

ارجاع:ویژگی scroll-snap-align CSS