如何用JavaScript实现页面中多个Bootstrap分页的滚轮滚动？

问题根源 #

你遇到的核心问题是元素选择与事件绑定的作用域冲突：

• 若用document.querySelector('.pagination')，只会获取页面中第一个匹配的分页元素，自然只有它能响应滚轮事件；
• 若循环绑定事件时误用const（比如传统for循环里的const i），会导致所有事件回调共享同一个作用域，最终只有最后一个分页生效。

修复方案 #

用querySelectorAll获取所有分页元素，通过遍历为每个分页独立绑定滚轮事件，利用forEach的参数作用域（或循环里用let）确保每个分页的事件逻辑独立。

完整代码示例

// 获取页面中所有Bootstrap分页组件
const allPaginations = document.querySelectorAll('.pagination');

// 遍历每个分页，绑定滚轮事件
allPaginations.forEach(pagination => {
  pagination.addEventListener('wheel', function(e) {
    // 阻止默认滚轮行为，避免页面整体滚动
    e.preventDefault();

    // 获取当前分页的激活项
    const activePage = this.querySelector('.page-item.active');
    if (!activePage) return;

    // 根据滚轮方向切换页码
    if (e.deltaY > 0) {
      // 向下滚动 → 切换到下一页
      const nextPage = activePage.nextElementSibling;
      if (nextPage && nextPage.classList.contains('page-item')) {
        nextPage.querySelector('a').click();
      }
    } else {
      // 向上滚动 → 切换到上一页
      const prevPage = activePage.previousElementSibling;
      if (prevPage && prevPage.classList.contains('page-item')) {
        prevPage.querySelector('a').click();
      }
    }
  });
});

关键细节说明 #

1. 选择所有分页：querySelectorAll会返回页面中所有.pagination元素的集合，确保不会遗漏任何分页组件；
2. 独立绑定事件：forEach的回调参数pagination在每次迭代中都是独立的块级作用域变量，避免了传统for循环中const导致的作用域共享问题；
3. Bootstrap结构兼容：代码基于Bootstrap标准分页结构编写（.pagination包含.page-item，激活项带.active类），如果你的分页结构有自定义修改，需要调整选择器；
4. 边界判断：切换页码前判断上/下一页元素是否存在，避免点击无效的页码项（比如已经在第一页时向上滚动）。

内容的提问来源于stack exchange，提问作者webworm84