简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  問答  >  主體

如何使用 JavaScript 選擇 Bootstrap 分頁程式碼中的所有元素？

我正在為我準備的網站使用 Bootstrap。由於溢出滾動條看起來很糟糕，我用 CSS 隱藏了它，並嘗試透過 JavaScript 用滑鼠滾輪滾動分頁。

當我使用下面給出的程式碼時，頂部的程式碼可以工作，但底部的程式碼卻不能。當我在 JavaScript 程式碼中給出 [0,1] 作為索引值時，這次底部的索引值起作用，但頂部的索引值不起作用。如何使其在同一頁面的兩個分頁上工作？據我從研究中了解到，我可能需要使用 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粉165522886P粉165522886236 天前306

全部回覆(1)我來回復

  • P粉676821490

    P粉6768214902024-02-26 10:31:15

    您可以使用 querySelectorAll 取得該類別的所有元素，然後循環遍歷它們以向每個元素新增一個事件偵聽器。 

    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();
    }
  });
});

    回覆
    0
  • 取消回覆