如何在Bootstrap 5.2中实现媒体查询触发的横向滚动导航（带按钮）

核心思路 #

在屏幕≤808px时，将导航容器设为横向滚动的溢出容器，通过左右按钮控制滚动位置，同时隐藏原生滚动条保持UI整洁。结合Bootstrap 5的工具类、SCSS媒体查询及JavaScript实现交互。

1. HTML结构（基于Bootstrap 5） #

<div class="container-fluid px-4">
  <div class="nav-scroll-wrapper position-relative">
    <!-- 左控制按钮 -->
    <button class="scroll-btn scroll-left position-absolute d-none" aria-label="向左滚动导航">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
      </svg>
    </button>

    <!-- 导航容器 -->
    <nav class="nav-scroll-container overflow-x-auto">
      <ul class="nav nav-pills gap-3 flex-nowrap py-2">
        <li class="nav-item">
          <a class="nav-link active" href="#">最新更新</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">游戏库</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">EA Play</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">新闻</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">电竞</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">支持</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
      </ul>
    </nav>

    <!-- 右控制按钮 -->
    <button class="scroll-btn scroll-right position-absolute d-none" aria-label="向右滚动导航">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
      </svg>
    </button>
  </div>
</div>

2. SCSS样式（结合Bootstrap变量） #

// 自定义断点匹配需求
$scroll-nav-breakpoint: 808px;

.nav-scroll-wrapper {
  max-width: 100%;
  z-index: 10;

  .scroll-btn {
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: rgba(0,0,0,0.7);
    }

    &.scroll-left {
      left: 1rem;
    }

    &.scroll-right {
      right: 1rem;
    }
  }

  .nav-scroll-container {
    // 隐藏原生滚动条
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

// 媒体查询：仅在≤808px时显示控制按钮
@media (max-width: #{$scroll-nav-breakpoint}) {
  .scroll-btn {
    display: flex !important;
  }
}

3. JavaScript交互逻辑 #

const scrollContainer = document.querySelector('.nav-scroll-container');
const scrollLeftBtn = document.querySelector('.scroll-left');
const scrollRightBtn = document.querySelector('.scroll-right');

// 滚动步长（可根据导航项宽度调整）
const scrollStep = 200;

// 左滚动事件
scrollLeftBtn.addEventListener('click', () => {
  scrollContainer.scrollBy({
    left: -scrollStep,
    behavior: 'smooth'
  });
});

// 右滚动事件
scrollRightBtn.addEventListener('click', () => {
  scrollContainer.scrollBy({
    left: scrollStep,
    behavior: 'smooth'
  });
});

// 动态控制按钮显示/隐藏（优化体验）
const updateBtnVisibility = () => {
  scrollLeftBtn.style.display = scrollContainer.scrollLeft <= 0 ? 'none' : 'flex';
  const isAtEnd = scrollContainer.scrollLeft + scrollContainer.clientWidth >= scrollContainer.scrollWidth - 10;
  scrollRightBtn.style.display = isAtEnd ? 'none' : 'flex';
};

// 初始化+监听滚动/窗口变化
updateBtnVisibility();
scrollContainer.addEventListener('scroll', updateBtnVisibility);
window.addEventListener('resize', updateBtnVisibility);

关键修复点 #

• 确保.nav-scroll-wrapper设置position-relative，让绝对定位的按钮基于容器定位，避免脱离文档流。
• 通过scrollbar-width: none等属性隐藏原生滚动条，和EA官网效果匹配。
• 利用媒体查询精准控制按钮显示时机，大屏下自动隐藏控件。
• 增加滚动位置监听，让按钮在滚动到边界时自动隐藏，提升交互合理性。

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