I was making a horizontally scrollable grid, I set overflow-x: scroll; and added two arrows. I added an event listener to both arrows to detect clicks and then scroll the grid, but the DOMElement.scroll(options) function is not working, the grid is not scrolled and the scroll event on the DOMElement is not fired.
const vwToPx = (vw) => document.documentElement.clientWidth * vw / 100;const scrollingArrows = document.querySelectorAll(".scroll-arrow");scrollingArrows.forEach(arrow => { const parentGrid = arrow.parentElement; parentGrid.addEventListener("scroll", () => console.log("scroll")) // Callback not invoked which means that the scroll() method is not working arrow.addEventListener("click", () => { const scrollLength = vwToPx(30) * 3 * (arrow.classList.contains("back-arrow") ? -1 : 1); console.log(parentGrid.scrollLeft, scrollLength) parentGrid.scroll({ left: parentGrid.scrollLeft + scrollLength, behavior: "smooth" }); console.log("scrolled") // Logs so the click callback is correctly set up which means that the scroll() method is not working })}).cards-grid-wrapper { position: relative;}.cards-grid { width: 100%; display: grid; grid-auto-columns: 30vw; grid-auto-flow: column; gap: 2vw; overflow-x: scroll; scrollbar-width: none;}.cards-grid::-webkit-scrollbar { display: none;}.scroll-arrow { width: 4vw; height: 4vw; background-color: var(--light-black); position: absolute; bottom: calc(150px / 2 + 15px); background-repeat: no-repeat; background-size: 30px; background-position: center; border-radius: 100%; display: flex; align-items: center; justify-content: center; font-family: "Material icons"; font-weight: 900; font-size: 30px; cursor: pointer; box-shadow: black 0 0 5px;}.back-arrow { background-image: url(/images/icons/back-arrow.svg); left: -2vw; place-self: center start;}.forward-arrow { background-image: url(/images/icons/forward-arrow.svg); right: -2vw; place-self: center end;}.cards-grid .card { height: 150px; background-color: var(--light-black); padding: 2vw; margin-bottom: 15px; border-radius: 5px; cursor: pointer; transition: 0.3s;}.cards-grid .card:hover { background-color: var(--hover-light-black); box-shadow: black 0px 5px 15px; transition: 0.3s;}.cards-grid .card * { margin: 0;}.cards-grid .card h1 { font-size: 20px; font-weight: 600; margin-bottom: 0.5rem;}<div class="cards-grid-wrapper"><div class="scroll-arrow back-arrow"></div><div class="scroll-arrow forward-arrow"></div><div class="cards-grid"><div class="card"><h1>Title</h1><p>Content</p></div><div class="card"><h1>Title</h1><p>Content</p></div><div class="card"><h1>Title</h1><p>Content</p></div><div class="card"><h1>Title</h1><p>Content</p></div><div class="card"><h1>Title</h1><p>Content</p></div><div class="card"><h1>Title</h1><p>Content</p></div><div class="card"><h1>Title</h1><p>Content</p></div></div></div>