Recently, I've been working on a website with Bootstrap, and I encountered an issue with the overflow scroll bar that I had to hide using CSS. To navigate the pagination with the mouse wheel, I've been experimenting with JavaScript.
I found that the top pagination works when the index value is set to [0], but the bottom one doesn't. On the other hand, if I change the index value to [1], the bottom one works but the top one doesn't. I suspect that switching from using const to let or var variables might solve this.
const container = document.querySelectorAll(".table-responsive")[0];
container.addEventListener("wheel", function (e) {
if (e.deltaY > 0) {
container.scrollLeft += 100;
e.preventDefault();
} else {
container.scrollLeft -= 100;
e.preventDefault();
}
});.table-responsive::-webkit-scrollbar {
width: 0 !important;
}
.content {
width: 100%;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
}<!doctype html>
<html lang="en>
... (omitted for brevity) ...