ساخت snap اسکرول؛ اسکرول افقی رسانه به سبک حرفه ای

در این آموزش قصد داریم تا snap اسکرول افقی برای نمایش رسانه ها بسازیم. در این روش تنها از CSS استفاده خواهیم کرد.

مشکلات متفاوتی با فراگیر شدن استفاده از رسانه ها در وب سایت ها بوجود آمد. یکی از این مشکلات نمایش تعداد زیادی ویدیو و تصاویر در یک صفحه بود. طراحان رابط کاربری و تجربه کاربری سعی کردند تا با ایجاد نوار های افقی بجای عمودی، این مشکل را حل کنند. با استفاده از این روش به سادگی می توان تعداد زیادی مطلب را در یک لیست قرار داد. مزیت استفاده از اسکرول افقی بجای عمودی، طولانی نشدن ارتفاع صفحات است.

طبیعتا این روش هم با مشکلات متفاوتی همراه است. یکی از این مشکلات اسکرول سخت برای دیدن یک عنصر در این لیست است. طراحان راه حل جالبی را برای این مشکل ارائه دادند. قابلیت snap در اسکرول باعث می شود تا اسکرول بار در ابتدای یک محتوا بچسبد. به این صورت کاربر به سادگی از اسکرول افقی رسانه ها استفاده کرده و نیازی به دقت در تنظیم آن ندارد.

طراحی اولیه کارت ها

قبل از شروع، ابتدا باید یک نوار افقی برای نمایش عناصر ایجاد کنیم. برای این کار روش های زیادی وجود دارد. با استفاده از flex و یا grid می توانیم به سادگی این قسمت را پیاده سازی کنیم. اما در این آموزش با استفاده از خاصیت flex این صفحه ساده را طراحی و پیاده سازی می کنیم. برای این کار یک باکس با کلاس list و عناصری با کلاس item می سازیم:

<div class="list">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
</div>

داخل عناصر را بر اساس نیاز خود طراحی می کنیم. در این مثال ما قصد نمایش لیست چند فیلم با استفاده از تصویر و نام آن ها را داریم. پس داخل هر آیتم یک تصویر و یک عنوان در نظر می گیریم. در این مرحله برای نمایش افقی عناصر از flex استفاده می کنیم:

.list {
  display: flex;
  overflow-x: auto;
}

در اینجا برای زیبا تر شدن طرح اسکرول بار را شخصی سازی کرده ایم. قبلا در سایت توسی آموزش «شخصی سازی اسکرول بار» را با استفاده از CSS داشتیم. پیشنهاد می کنم این ویدیو را به عنوان مکمل این آموزش از دست ندهید.

حالا نوبت به تعیین اندازه عنصر های داخلی می رسد. برای این کار بهتر است ابعاد رو طوری در نظر بگیریم که کاربر متوجه وجود عناصر بیشتر در صفحه شود. برای مثال با قرار دادن عرض ۴۵% برای آن ها همیشه یک نصف یک عنصر در انتهای لیست نمایش داده می شود.

.item {
  width: 45%;
}

تنها قسمت باقی مانده در طراحی، تنظیم تصاویر موجود در لیست اسکرول افقی رسانه است. برای ایجاد یکپارچگی در تصاویر از ثابت کردن نسبت تصویر تمام عکس ها استفاده می کنیم. در مرحله آخر هم برای حل مشکل تصاویر از خاصیت object-fit استفاده می کنیم.

.itemImage {
  aspect-ratio: 16/9;
  object-fit: cover;
}

تا اینجا لیست اصلی ما به صورت کامل ساخته شده است. با تغییر رنگ و ایجاد فاصله بین آن ها می توان نتیجه بهتری گرفت.

ساخت snap در اسکرول افقی

تا اینجا یک لیست زیبا با قابلیت اسکرول افقی برای نمایش تعداد زیادی رسانه داریم. اما همانطور که اشاره کردیم قرار است تا قابلیت snap یا چسبیدن را به این نوار اضافه کنیم. برای این کار روش های متفاوتی وجود دارد. ما قصد داریم تا تنها با استفاده از CSS این طرح را پیاده سازی کنیم. برای این کار از خاصیت scroll-snap-type استفاده می کنیم. این خاصیت قابلیت snap نوار پیمایش را برای ما ایجاد می کند. در واقع ما می توانیم با استفاده از دو مقدار mandatory و proximity رفتار آن را کنترل کنیم. در حالت اول اسکرول به صورت اجباری به نزدیک ترین محل می چسبد. اما در حالت دوم تنها در صورتی که نزدیک به مرز ها باشیم این اتفاق می افتد. در تعریف این خاصیت باید عمودی و یا افقی بودن حرکت را با x و y ثبت کنیم:

.list {
  scroll-snap-type: x mandatory;
}

در اینجا تنها این قابلیت را فعال کرده ایم. اما مرورگر محل snap یا چسبیدن scrollbar را نمی داند. برای این کار کافی است تا با تعریف خاصیت scroll-snap-align در عناصر داخلی محل مورد نظر را مشخص کنیم. با مقدار ابتدا، وسط و انتها، محل snap اسکرول بار را معرفی می کنیم:

.item {
  scroll-snap-align: start;
}

به همین سادگی توانستیم یک اسکرول افقی رسانه چسبنده ایجاد کنیم. این خاصیت قابلیت ها و نکات ریز زیادی دارد. در ویدیو بالا سعی کردیم تا با ایجاد تغییرات کوچک ظاهر نهایی پروژه را جذاب تر کنیم.