CSS scroll-snap-align کی ویژگی

تعلیم اور استعمال

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
نوشتار زبان JavaScript: object.style.scrollSnapAlign="start"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

صفحات مرتبط

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