ویژگی scroll-snap-stop CSS
- صفحه قبلی scroll-snap-align
- صفحه بعدی scroll-snap-type
تعریف و استفاده
در هنگام حرکت سریع روی صفحه لمسی یا صفحه لمسی،scroll-snap-stop ویژگی برای مشخص کردن اینکه اسکرول مستقیماً از روی عنصر بپردازد یا متوقف شده و به عنصر بعدی جذب شود، استفاده می‌شود.
برای کنترل رفتار توقف吸附 اسکرول، باید ویژگی را در عنصر فرزند تنظیم کنید scroll-snap-stop و scroll-snap-align ویژگی، و همچنین در عنصر پدر تنظیم شود: scroll-snap-type ویژگی.
توجه: برای تجربه ویژگی، باید از حرکت لمسی روی دستگاهی با صفحه لمسی یا صفحه لمسی استفاده کنید. scroll-snap-stop تأثیر ویژگی.
مثال
در هنگام حرکت سریع روی صفحه لمسی یا صفحه لمسی، اسکرول را مجبور به توقف و جذب به عنصر بعدی کنید، نه اینکه مستقیماً از روی عنصر بپردازید:
div {
scroll-snap-stop: always;
}
اسکریپت CSS
scroll-snap-stop: normal|always|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| normal | مقدار پیش‌فرض. در پس از حرکت سریع روی صفحه لمسی یا صفحه لمسی، اسکرول به آرامی کاهش می‌یابد و چندین عنصر را می‌پردازد. |
| always | در پس از حرکت سریع روی صفحه لمسی یا صفحه لمسی، اسکرول متوقف می‌شود و عنصر بعدی به موقعیت تمرکز جذب می‌شود. |
| initial | این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. ببینید: initial. |
| inherit | این ویژگی را از عنصر پدر خود ارث می‌برد. ببینید: inherit. |
جزئیات فنی
| مقدار پیش‌فرض: | normal |
|---|---|
| ارث‌پذیری: | خیر |
| انیمیشن: | پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| اسکریپت جاوااسکریپت: | object.style.scrollSnapStop="always" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه‌ای اولیه از مرورگر هستند که این ویژگی را پشتیبانی می‌کند.
| کروم | اندروید | فایرفاکس | سفاری | опера |
|---|---|---|---|---|
| 75.0 | 79.0 | 103.0 | 15.0 | 62.0 |
صفحات مرتبط
- صفحه قبلی scroll-snap-align
- صفحه بعدی scroll-snap-type
