ویژگی scroll-snap-align CSS

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

scroll-snap-align ویژگی مشخص می‌کند که هنگامی که شما اسکرول را متوقف می‌کنید، عنصر به موقعیت نقطه تمرکز چسبیده می‌شود.

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

مثال

مثال 1

هنگام توقف کاربر در اسکرول، عنصر نزدیک‌ترین به وسط به وسط جذب می‌شود:

div {
  scroll-snap-align: center;
}

آزمایش کنید

مثال 2: کتابخانه تصاویر

scroll-snap-align این ویژگی بسیار مناسب برای استفاده در تصاویر اسکرول شده است. در اینجا، جهت اسکرول افقی است و روش چسبندگی吸附 به وسط است. هنگام رها کردن اسکرول، تصویر نزدیک‌ترین به وسط منطقه اسکرول شده به وسط جذب می‌شود. سعی کنید روی یک تصویر کلیک کنید و سپس از کلیدهای چپ و راست برای اسکرول کردن آن‌ها استفاده کنید:

#container > img {
  scroll-snap-align: none center;
}
بیتینگ رقصنده ووهان گل رز هانگژو

آزمایش کنید

bridge alley in jungle mountains man with camera Cinque Terre

مثال 3: چسبندگی吸附 موقعیت در جهت بلوک عمودی

هنگام رول‌شوندن عمودی،scroll-snap-align این ویژگی می‌تواند در جهت بلوک به عنوان موقعیت شروع عنصر تنظیم شود:

#container > div {
  scroll-snap-align: start none;
}

آزمایش کنید

نوشتار CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

مقدار ویژگی

مقدار توضیح
none بدون اثر چسبندگی رول‌شوندن. مقدار پیش‌فرض.
start در محور x و y، در شروع عنصر به چسبندگی رول‌شوندن می‌پردازد.
end در محور x و y، در انتهای عنصر به چسبندگی رول‌شوندن می‌پردازد.
center در محور x و y، در مرکز عنصر به چسبندگی رول‌شوندن می‌پردازد.
block inline نوشتار دو ارزشی. اولین ارزش روش چسبندگی در جهت بلوک را مشخص می‌کند، دومین ارزش روش چسبندگی در جهت خطی را مشخص می‌کند.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. لطفاً به: initial.
inherit این ویژگی را از عنصر پدر خود ارث می‌برد. لطفاً به: inherit.

جزئیات فنی

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

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

صفحات مرتبط

ارجاع به:ویژگی scroll-snap-type CSS