- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
J'utilise Bootstrap pour un site Web que je prépare. Comme la barre de défilement de débordement avait l'air mauvaise, je l'ai cachée avec CSS et j'ai essayé de faire défiler la pagination avec la molette de la souris via JavaScript.
Lorsque j'utilise le code ci-dessous, le code du haut fonctionne mais pas le code du bas. Lorsque je donne [0,1] comme valeur d'index dans le code JavaScript, cette fois la valeur d'index inférieure fonctionne mais la valeur d'index supérieure ne fonctionne pas. Comment puis-je le faire fonctionner sur deux paginations sur la même page ? D’après ce que j’ai compris de la recherche, je devrai peut-être utiliser 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>
P粉6768214902024-02-26 10:31:15
Vous pouvez utiliser querySelectorAll pour obtenir tous les éléments de cette classe, puis les parcourir en boucle pour ajouter un écouteur d'événement à chaque élément.
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();
}
});
});