I have 1 parent div and 4 child div, the 4 child take all the space evenly, and when user click one of the child it expand taking all the space and the parent will be scrollable horizontally. My problem is how do I make the child move to the center of the screen when user click. Like when clicked it snap to that child and expand
Here is the fiddle:
https://jsfiddle.net/jmingua/hj3nmbd7/3/
I tried the scrollintoview method but it does not work:
const items = document.querySelectorAll(".wrapper");
items.forEach((item) => {
item.addEventListener("click", () => {
item.scrollIntoView({
behavior: "smooth",
block: "center",
inline: "center",
});
item.classList.add("active");
});
});
John Lee Ingua is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.