Saya menggunakan Bootstrap untuk tapak web yang saya sediakan. Memandangkan bar skrol limpahan kelihatan buruk, saya menyembunyikannya dengan CSS dan cuba menatal penomboran dengan roda tetikus melalui JavaScript.
Apabila saya menggunakan kod yang diberikan di bawah, kod atas berfungsi tetapi kod bawah tidak berfungsi. Apabila saya memberikan [0,1] sebagai nilai indeks dalam kod JavaScript, kali ini nilai indeks bawah berfungsi tetapi nilai indeks teratas tidak berfungsi. Bagaimanakah saya boleh menjadikannya berfungsi pada dua penomboran pada halaman yang sama? Daripada apa yang saya faham daripada penyelidikan, saya mungkin perlu menggunakan let 或 var 变量而不是 const.
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">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<br>
<br>
<body>
<div class="container">
<nav aria-label="Page navigation example" class="table-responsive">
<ul class="pagination justify-content-between pagination-md">
<li class="page-item m-1 active"><a class="page-link" href="#">1</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">2</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">3</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">4</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">5</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">6</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">7</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">8</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">9</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">10</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">11</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">12</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">13</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">14</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">15</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">16</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">17</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">18</a>
</li>
</ul>
</nav>
<div class="content">
Some Page Content
</div>
<nav aria-label="Page navigation example" class="table-responsive">
<ul class="pagination justify-content-between pagination-md">
<li class="page-item m-1 active"><a class="page-link" href="#">1</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">2</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">3</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">4</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">5</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">6</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">7</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">8</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">9</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">10</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">11</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">12</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">13</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">14</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">15</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">16</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">17</a>
</li>
<li class="page-item m-1"><a class="page-link" href="#">18</a>
</li>
</ul>
</nav>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh menggunakan
querySelectorAlluntuk mendapatkan semua elemen kelas itu dan kemudian mengulanginya untuk menambah pendengar acara pada setiap elemen.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(); } }); });