DEV Community

Discussion on: Creating practical Instagram-like galleries and horizontal lists with CSS scroll snapping

joostkiens profile image
Joost Kiens Author • Edited on

Yeah, of course! The indicators are easiest: if we know the index of the clicked indicator, we can tell the corresponding item to scrollIntoView.

indicators.forEach((x, i) =>
  x.addEventListener("click", () =>
    items[i].scrollIntoView({ inline: "start", behavior: "smooth" })

For the arrows we could keep track of the current active index:

const state = { active: 0 };

function activateIndicator(index) { = index;
  indicators.forEach((indicator, i) => {
    indicator.classList.toggle("active", i ===;

and scrollIntoView the prev or next one.

prev.addEventListener("click", () => {
  items[ - 1]?.scrollIntoView({
    inline: "start",
    behavior: "smooth"

next.addEventListener("click", () => {
  items[ + 1]?.scrollIntoView({
    inline: "start",
    behavior: "smooth"

But the options of scrollIntoView are not supported by Safari 🙁. So no smooth scrolling.
We can add a polyfill, and it works across modern browsers:

<script src=",Element.prototype.scrollIntoView"></script>

I made a quick demo.

electrifried profile image
Jaclyn Tan

Ohh that is so cool. Thanks so much for the demo I really appreciate it!