DEV Community

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

Collapse
 
joostkiens profile image
Joost Kiens • Edited

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" })
  )
);
Enter fullscreen mode Exit fullscreen mode

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);
  });
}
Enter fullscreen mode Exit fullscreen mode

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"
  });
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Collapse
 
allmerovi profile image
Allmerovi

Hi, thak You werry much to stih solution. I ask You for help. It perfecty run on separate page Original But if I try to use this solution on my pension page Pension page indicators and prev and next buttons stop work after sirts clicking and do not run until i roll the page. After that it work 1 step and another page rolling is needed. Can You help me? Prese. If I have to send You the source, write me. Thanks.