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
نوشتار جاوااسکریپت: object.style.scrollSnapAlign="start"

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

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

صفحات مرتبط

منبع:CSS scroll-snap-type ਪ੍ਰਤੀਯੋਗਿਤਾ