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.

1. Kode CSS

Buat file css dan berinama style.css. Copy paste semua kode 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. Kode HTML

Buat file html dan berinama index.html. Copy paste lagi kode 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 yang sebelumnya sudah dibuat.

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.