DEV Community

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

View post
Collapse
 
electrifried profile image
Jaclyn Tan •

Do you think it would be easy enough to add click events to the indicators or arrows to this implementation? To allow for the people that don't have magic mice or touch screens...

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.