DEV Community

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

Collapse
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) {
  state.active = index;
  indicators.forEach((indicator, i) => {
    indicator.classList.toggle("active", i === state.active);
  });
}

and scrollIntoView the prev or next one.

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

next.addEventListener("click", () => {
  items[state.active + 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="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver,Element.prototype.scrollIntoView"></script>

I made a quick demo.

Collapse
electrifried profile image
Jaclyn Tan

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