Cara Membuat Scroll Snap Horizontal dengan CSS

Seotechman.com, Bogor 14/04/2021. Dalam artikel kali ini kita akan sedikit berbagi, tentang cara membuat scroll snap horizontal dengan CSS. Tutorial ini sangat mudah diimplementasikan oleh sobat semua, dan ini juga tidak rumit sama sekali.

Bagaimana cara membuat scroll snap horizontal ini?

Untuk cara dan langkah pembuatannya sobat bisa simak dibawah ini.

Cara Membuat Scroll Snap Horizontal dengan CSS

Apabila sobat mempunyai cPanel, sobat hanya perlu membuat file style.css dan index.html (ini hanya untuk contoh saja) di filemanager. Atau, bisa juga menggunakan codepen.

Lihat Demo Ini

1. Membuat CSS Scroll Snap

Copy semua CSS dibawah ini:

section {
  --container-width: 75vw;
  width: clamp(240px, var(--container-width), 1024px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  display: grid;
  grid-auto-flow: column;
  gap: 2px;
}

article {
  scroll-snap-align: center;
  background: hotpink;
  color: white;
  width: var(--container-width);
  aspect-ratio: 16/9;
  display: grid;
  place-content: left;
}

/* 4 atau lebih */
section > article:nth-last-child(n+4),
section > article:nth-last-child(n+4) ~ article {
  background: rebeccapurple;
  width: 50vw;
}

/* 6 atau lebih */
section > article:nth-last-child(n+6),
section > article:nth-last-child(n+6) ~ article {
  background: cyan;
  color: black;
  width: 35vw;
  aspect-ratio: 4/3;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  
  display: grid;
  place-content: center;
  gap: 5vh;
  padding-block: 5vh;
}

Jika sudah, silahkan sobat paste kedalam file style.css yang sudah sobat buat sebelumnya.

2. Membuat HTML Scroll Snap

Copy lagi HTML dibawah ini:

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
</section>

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
</section>

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
</section>

Masukan kedalam file index.html.

Note: Untuk CSS nya, sobat bisa rubah sesuai dengan keinginan masing-masing.

yang terakhir, lihat hasilnya.

Begitulah kira-kira cara membuat scroll snap horizontal dengan CSS.