如何为Bootstrap水平导航栏添加滚动按钮实现内容滚动？

安全阿岳

2026-7-16

问题：为Bootstrap水平导航栏添加左右按钮滚动效果

我用Bootstrap搭建的网站中有一个包含大量分类的水平导航栏，当前仅支持默认横向滚动效果。为让网站更具现代感，我希望将默认滚动替换为带左右按钮的滚动效果，但在Bootstrap官网未找到相关方案。请问能否通过Bootstrap结合JavaScript实现该需求？

原HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Annchan4 Tasty Shop</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!--bootstrap-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="w-75 mx-auto">
    <nav class="navbar navbar-expand-lg"> <!--isso eh um flex-->
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" aria-current="page" href="#">
                            Promos
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Cakes
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Cookies
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Brownies
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Ice-cream
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Fudges
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Savory Crackers
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Savory Cakes
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Savory Breads
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Savory Muffins
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Pizzas
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Lunch
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Dinner
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Fit
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Smoothies
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link link-light btn btn-secondary" href="#">
                            Market
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>
</body>
</html>

原CSS代码

#navbarNav {
    white-space: nowrap;
    overflow-x: auto;
}

.nav-item {
    display: inline-block;
    float: none;
}

.btn-secondary
{
    color:white;
}

解决方案

完全可以通过Bootstrap组件结合JavaScript实现该需求，具体实现步骤如下：

1. 修改HTML结构，添加滚动控制按钮

在导航栏容器内插入左右滚动按钮，使用Bootstrap自带的按钮样式和图标组件：

<div class="w-75 mx-auto">
    <nav class="navbar navbar-expand-lg position-relative"> <!-- 添加相对定位，用于按钮绝对定位 -->
        <div class="container-fluid">
            <!-- 左滚动按钮 -->
            <button class="scroll-btn scroll-left btn btn-secondary position-absolute start-0 top-50 translate-middle-y d-none d-lg-block">
                <i class="bi bi-chevron-left"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <!-- 原有导航项保持不变 -->
                </ul>
            </div>
            <!-- 右滚动按钮 -->
            <button class="scroll-btn scroll-right btn btn-secondary position-absolute end-0 top-50 translate-middle-y d-none d-lg-block">
                <i class="bi bi-chevron-right"></i>
            </button>
        </div>
    </nav>
</div>

2. 更新CSS样式

调整导航栏容器样式，隐藏原生滚动条，优化按钮显示效果：

#navbarNav {
    white-space: nowrap;
    overflow-x: auto;
    /* 隐藏各浏览器原生滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#navbarNav::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

.nav-item {
    display: inline-block;
    float: none;
}

.btn-secondary {
    color:white;
}

/* 导航栏容器隐藏溢出内容，避免按钮超出范围 */
.navbar.position-relative {
    overflow: hidden;
}

.scroll-btn {
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

3. 编写JavaScript滚动逻辑

实现按钮滚动控制、按钮自动显示/隐藏逻辑：

document.addEventListener('DOMContentLoaded', function() {
    const navbarNav = document.getElementById('navbarNav');
    const scrollLeftBtn = document.querySelector('.scroll-left');
    const scrollRightBtn = document.querySelector('.scroll-right');
    const scrollStep = 300; // 每次滚动的距离，可根据需求调整

    // 更新按钮显示状态：滚动到两端时隐藏对应按钮
    function updateButtonVisibility() {
        scrollLeftBtn.classList.toggle('d-none', navbarNav.scrollLeft <= 10);
        scrollRightBtn.classList.toggle('d-none', navbarNav.scrollLeft >= navbarNav.scrollWidth - navbarNav.clientWidth - 10);
    }

    // 左滚动逻辑
    scrollLeftBtn.addEventListener('click', function() {
        navbarNav.scrollBy({ left: -scrollStep, behavior: 'smooth' });
    });

    // 右滚动逻辑
    scrollRightBtn.addEventListener('click', function() {
        navbarNav.scrollBy({ left: scrollStep, behavior: 'smooth' });
    });

    // 滚动时实时更新按钮状态
    navbarNav.addEventListener('scroll', updateButtonVisibility);

    // 初始化页面时检查按钮状态
    updateButtonVisibility();

    // 窗口大小变化时重新检查按钮状态
    window.addEventListener('resize', updateButtonVisibility);
});

效果说明

大屏幕下自动显示左右滚动按钮，点击可平滑滚动导航栏
滚动到导航栏两端时，对应方向的按钮会自动隐藏
保留原生横向滚动功能，兼容鼠标滚轮、触摸滑动操作
移动端保持Bootstrap默认的折叠导航逻辑，滚动按钮仅在大屏幕显示

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

如何为Bootstrap水平导航栏添加滚动按钮实现内容滚动？

原HTML代码 #

原CSS代码 #

解决方案 #

1. 修改HTML结构，添加滚动控制按钮 #

2. 更新CSS样式 #

3. 编写JavaScript滚动逻辑 #

效果说明 #