单页多组Bootstrap 5滚动标签箭头按钮失效问题求助

问题根源是你给滚动箭头用了唯一id（scrollLeft/scrollRight），页面中重复使用相同id时，JS只会绑定第一个匹配元素，导致后续组的箭头无法触发事件。按以下步骤修改即可解决：

1. 调整HTML结构与类名 #

给每组标签容器添加父级分组类（比如tab-scroll-group），同时把箭头按钮的id替换为类：

<!-- 第一组标签 -->
<div class="tab-scroll-group d-flex align-items-center gap-3 mb-4">
  <button class="scrollLeft btn btn-dark"><</button>
  <div class="nav nav-pills flex-nowrap overflow-auto" role="tablist" style="scrollbar-width: none;">
    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-home" type="button">Home</button>
    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button">Profile</button>
    <!-- 更多标签项 -->
  </div>
  <button class="scrollRight btn btn-dark">></button>
</div>

<!-- 第二组标签 -->
<div class="tab-scroll-group d-flex align-items-center gap-3">
  <button class="scrollLeft btn btn-dark"><</button>
  <div class="nav nav-pills flex-nowrap overflow-auto" role="tablist" style="scrollbar-width: none;">
    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button">Tab 1</button>
    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button">Tab 2</button>
    <!-- 更多标签项 -->
  </div>
  <button class="scrollRight btn btn-dark">></button>
</div>

2. 修改JS代码实现分组绑定 #

遍历每个标签组，给组内的箭头按钮绑定独立的滚动事件，确保每组逻辑互不干扰：

document.querySelectorAll('.tab-scroll-group').forEach(group => {
  const scrollLeft = group.querySelector('.scrollLeft');
  const scrollRight = group.querySelector('.scrollRight');
  const tabWrap = group.querySelector('.nav');

  scrollLeft.addEventListener('click', () => {
    tabWrap.scrollBy({ left: -150, behavior: 'smooth' });
  });

  scrollRight.addEventListener('click', () => {
    tabWrap.scrollBy({ left: 150, behavior: 'smooth' });
  });
});

这样修改后，所有组的滚动箭头都能正常触发标签栏滚动，同时原有的标签内容切换功能保持正常。

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