How to select all elements in Bootstrap pagination code using JavaScript?

Question

I'm using Bootstrap for a website I'm preparing. Since the overflow scrollbar looks bad, I've hidden it with CSS and tried scrolling the pagination with mouse wheel via JavaScript. When I use the code given below, the top code works but the bottom code does not. When I give [0,1] as index value in JavaScript code, this time the bottom index value works but the top index value doesn't work. How can I make it work on two paginations on the same page? From what I understand from research, I may need to use let or va

P粉676821490 · Answer

You can use querySelectorAll to get all elements of that class and then loop through them to add an event listener to each element.

const containers = document.querySelectorAll(".table-responsive");
containers.forEach(container => {
  container.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) {
      container.scrollLeft = 100;
      e.preventDefault();
    } else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  });
});