如何在Bootstrap模态框中实现标签页垂直滚动及带左右切换按钮的横向滚动效果？

我来帮你搞定这两个需求，下面分两部分一步步实现：

一、横向标签页+左右切换按钮 #

首先我们需要调整标签页的HTML结构，添加容器包裹切换按钮和标签列表，再配合CSS和少量JS实现滚动控制：

1. 修改后的HTML结构（整合你的原有代码） #

<button data-toggle="modal" data-target="#menu_tab">Menu</button> 
<div class="modal fade" id="menu_tab"> 
  <div class="modal-dialog"> 
    <div class="modal-content"> 
      <div class="modal-body"> 
        <div class="form-group" id="font" align='right'> 
          <fieldset class="scheduler-border"> 
            <legend class="scheduler-border">Menu</legend> 
            <div class="form-row"> 
              <div role="tabpanel">
                <!-- 新增标签导航容器 -->
                <div class="tab-nav-container">
                  <button class="tab-scroll-btn tab-scroll-left" type="button">&lt;</button>
                  <div class="tabs-wrapper">
                    <ul class="nav nav-tabs" role="tablist"> 
                      <li role="presentation" class="nav-item active"> 
                        <a class="nav-link" href="#Tab1" aria-controls="home" role="tab" data-toggle="tab">Tab1</a> 
                      </li> 
                      <li role="presentation" class="nav-item"> 
                        <a class="nav-link" href="#Tab2" aria-controls="home" role="tab" data-toggle="tab">Tab2</a> 
                      </li> 
                      <li role="presentation" class="nav-item"> 
                        <a class="nav-link" href="#Tab3" aria-controls="home" role="tab" data-toggle="tab">Tab3</a> 
                      </li> 
                      <li role="presentation" class="nav-item"> 
                        <a class="nav-link" href="#Tab4" aria-controls="home" role="tab" data-toggle="tab">Tab4</a> 
                      </li> 
                      <li role="presentation" class="nav-item"> 
                        <a class="nav-link" href="#Tab5" aria-controls="home" role="tab" data-toggle="tab">Tab5</a> 
                      </li> 
                      <li role="presentation" class="nav-item"> 
                        <a class="nav-link" href="#Tab6" aria-controls="home" role="tab" data-toggle="tab">Tab6</a> 
                      </li> 
                      <li role="presentation" class="nav-item"> 
                        <a class="nav-link" href="#Tab7" aria-controls="home" role="tab" data-toggle="tab">Tab7</a> 
                      </li> 
                      <li role="presentation" class="nav-item"> 
                        <a class="nav-link" href="#Tab8" aria-controls="home" role="tab" data-toggle="tab">Tab8</a> 
                      </li> 
                      <li role="presentation" class="nav-item"> 
                        <a class="nav-link" href="#Tab9" aria-controls="home" role="tab" data-toggle="tab">Tab9</a> 
                      </li> 
                    </ul>
                  </div>
                  <button class="tab-scroll-btn tab-scroll-right" type="button">&gt;</button>
                </div>
                <!-- 标签内容保持不变 -->
                <div class="tab-content"> 
                  <div role="tabpanel" class="tab-pane active" id="Tab1"> 
                    <div class="p-3"> tab1 content </div> 
                  </div> 
                  <div role="tabpanel" class="tab-pane" id="Tab2"> 
                    <div class="p-3"> tab2 content </div> 
                  </div> 
                  <div role="tabpanel" class="tab-pane" id="Tab3"> 
                    <div class="p-3"> tab3 content </div> 
                  </div> 
                  <div role="tabpanel" class="tab-pane" id="Tab4"> 
                    <div class="p-3"> tab4 content </div> 
                  </div>
                  <!-- 补充其他标签内容 -->
                  <div role="tabpanel" class="tab-pane" id="Tab5"> 
                    <div class="p-3"> tab5 content </div> 
                  </div>
                  <div role="tabpanel" class="tab-pane" id="Tab6"> 
                    <div class="p-3"> tab6 content </div> 
                  </div>
                  <div role="tabpanel" class="tab-pane" id="Tab7"> 
                    <div class="p-3"> tab7 content </div> 
                  </div>
                  <div role="tabpanel" class="tab-pane" id="Tab8"> 
                    <div class="p-3"> tab8 content </div> 
                  </div>
                  <div role="tabpanel" class="tab-pane" id="Tab9"> 
                    <div class="p-3"> tab9 content </div> 
                  </div>
                </div> 
              </div> 
            </div> 
          </fieldset> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

2. 添加CSS样式 #

/* 标签导航容器 */
.tab-nav-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}

/* 标签包裹层，隐藏溢出部分 */
.tabs-wrapper {
  flex: 1;
  overflow: hidden;
}

/* 让标签横向排列不换行 */
.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* 隐藏原生滚动条 */
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar {
  display: none;
}

/* 切换按钮样式 */
.tab-scroll-btn {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  z-index: 1;
}
.tab-scroll-left {
  margin-right: 0.5rem;
}
.tab-scroll-right {
  margin-left: 0.5rem;
}
.tab-scroll-btn:hover {
  background: #e9ecef;
}

3. 添加JS滚动控制逻辑 #

// 获取元素
const tabWrapper = document.querySelector('.tabs-wrapper .nav-tabs');
const leftBtn = document.querySelector('.tab-scroll-left');
const rightBtn = document.querySelector('.tab-scroll-right');

// 每次滚动的距离（可根据需求调整）
const scrollStep = 200;

// 左滚动
leftBtn.addEventListener('click', () => {
  tabWrapper.scrollBy({
    left: -scrollStep,
    behavior: 'smooth'
  });
});

// 右滚动
rightBtn.addEventListener('click', () => {
  tabWrapper.scrollBy({
    left: scrollStep,
    behavior: 'smooth'
  });
});

// 可选：根据滚动位置显示/隐藏按钮
function toggleScrollButtons() {
  leftBtn.style.display = tabWrapper.scrollLeft > 0 ? 'block' : 'none';
  rightBtn.style.display = tabWrapper.scrollLeft < (tabWrapper.scrollWidth - tabWrapper.clientWidth) ? 'block' : 'none';
}

// 初始化和滚动时触发
toggleScrollButtons();
tabWrapper.addEventListener('scroll', toggleScrollButtons);

二、标签页内容垂直滚动 #

这个需求非常简单，只需给标签内容容器设置固定高度和垂直滚动属性即可：

添加CSS样式 #

/* 标签内容垂直滚动 */
.tab-content .tab-pane {
  max-height: 300px; /* 可根据模态框实际高度调整 */
  overflow-y: auto;
}

当标签内的内容超过max-height设置的高度时，就会自动出现垂直滚动条，用户可以滚动查看全部内容。

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