آموزش اسکرول سنپ الاین در CSS

اسکرول سنپ الاین (Scroll Snap Align) در CSS

سلام دوستان! امروز می‌خواهیم درباره یکی از ویژگی‌های جذاب CSS به نام اسکرول سنپ الاین صحبت کنیم. این ویژگی به شما اجازه می‌دهد تا کنترل بهتری روی نحوه‌ی اسکرول کردن صفحات وب داشته باشید. به عبارت ساده‌تر، با استفاده از این ویژگی می‌توانید عناصر خاصی را در هنگام اسکرول کردن «نقطه‌ی تماسی» کنید. متوجه شدید؟ یعنی وقتی کاربر اسکرول می‌کند، می‌تواند متوجه شود که کدام قسمت از صفحه در حال حاضر «مرکز توجه» است.

در دنیای مدرن وب‌سایت‌ها، مخصوصاً وقتی با گالری‌ها یا لیست‌های طولانی کار می‌کنیم، این ویژگی خیلی کاربردی می‌شود. شاید شما بخواهید که وقتی کاربر به یک بخش خاص از صفحه می‌رسد، تمام تمرکز روی آن قسمت باشد و بقیه قسمت‌ها در پس‌زمینه قرار بگیرند. اینجاست که scroll-snap-align به کار می‌آید!

حالا بیایید نگاهی به چگونگی استفاده از این ویژگی بیندازیم. فکر ناخودآگاه اکثر ما این است که به سادگی باید فقط CSS بنویسیم و کار تمام است، اما باید به جزئیات هم دقت کنیم! این ویژگی باید به طور همزمان با بلندی‌ها و ویژگی‌های اسکرول‌های لمسی یا ماوس ترکیب شود تا بهترین نتیجه را بگیریم.

اسکرول سنپ الاین معمولاً با scroll-snap-type در والدین و scroll-snap-align در فرزندان استفاده می‌شود. این ترکیب به شما این امکان را می‌دهد که کنترل دقیق‌تری بر چگونگی رفتار اسکرول صفحه داشته باشید. حالا بیایید نگاهی به کد بزنیم!

    
آیتم ۱

    
آیتم ۲

    
آیتم ۳

    
آیتم ۴



<style>
.scroll-container {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.snap-item {
    flex: none;
    width: 300px;
    height: 200px;
    margin: 10px;
    background-color: lightblue;
    scroll-snap-align: start;
}
</style>

در کد بالا، ما یک «کانتینر اسکرول» داریم که چند «آیتم سنپ» در آن قرار دارد.