使用JS/jQuery实现Bootstrap4.6水平滚动导航栏li元素居中与自动激活

核心改造点 #

• 移除原有硬编码的宽度判断逻辑，改为动态计算所有导航项的位置，适配不同宽度的导航项和不同屏幕尺寸
• 新增点击导航项的自动居中逻辑，通过计算元素中点和导航可视区中点的差值实现平滑滚动
• 新增滚动时的自动激活逻辑，加入防抖处理避免频繁计算导致的性能问题，通过判断元素中点与导航中点的位置关系确定当前激活项
• 支持任意数量的导航项，不需要手动修改代码适配

完整修改代码 #

JS代码（替换原有JS即可） #

$(function() {
  const $nav = $('#navegacion');
  const $navItems = $nav.find('li');
  const navWidth = $nav.width();
  // 导航可视区域中点的X坐标
  const navCenterX = navWidth / 2;

  // 功能1：点击导航项自动滚动到居中位置
  $navItems.on('click', function(e) {
    const $item = $(this);
    // 计算当前元素相对于导航容器的左偏移
    const itemLeft = $item.offset().left - $nav.offset().left + $nav.scrollLeft();
    const itemWidth = $item.outerWidth();
    // 计算目标滚动位置：让元素中点与导航中点对齐
    const targetScroll = itemLeft + itemWidth / 2 - navCenterX;
    // 平滑滚动到目标位置
    $nav.animate({
      scrollLeft: targetScroll
    }, 200);
  });

  // 功能2：滚动时自动激活处于居中位置的导航项
  let scrollTimer = null;
  $nav.on('scroll', function() {
    // 防抖处理，减少不必要的计算
    if (scrollTimer) clearTimeout(scrollTimer);
    scrollTimer = setTimeout(() => {
      const scrollLeft = $nav.scrollLeft();
      // 遍历所有导航项，找到当前处于居中位置的项
      $navItems.each(function() {
        const $item = $(this);
        const itemLeft = $item.offset().left - $nav.offset().left + scrollLeft;
        const itemWidth = $item.outerWidth();
        const itemCenterX = itemLeft + itemWidth / 2;
        // 允许半格元素宽度的误差范围
        if (Math.abs(itemCenterX - (scrollLeft + navCenterX)) < itemWidth / 2) {
          $navItems.removeClass('active');
          $item.addClass('active');
          return false;
        }
      });
    }, 50);
  });
});

CSS可选调整 #

如果希望导航项不要每个占满全屏宽度，改为紧凑排列的可滚动tab样式，可将原有CSS中#segunda-nav li的min-width: 100%修改为min-width: 120px，数值可根据实际设计需求调整。

HTML代码（无需修改，原有代码可直接复用） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<section id="segunda-nav">
    <div class="container">
        <div class="row">
            <div class="col">
                <ul id="navegacion" class="nav nav-tabs" role="tablist">
                    <li id="description" role="presentation" class="active"><a data-target="" aria-controls="home" role="tab" data-toggle="tab">DESCRIPTION</a></li>
                    <li id="what" role="presentation"><a data-target="#informacion-programa" data-slide-to="1" aria-controls="profile" role="tab" data-toggle="tab" class="active">WHAT?</a></li>
                    <li id="where" role="presentation"><a data-target="#informacion-programa" data-slide-to="2" aria-controls="messages" role="tab" data-toggle="tab">WHERE?</a></li>
                    <li id="when" role="presentation"><a data-target="#informacion-programa" data-slide-to="3" aria-controls="settings" role="tab" data-toggle="tab">WHEN?</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

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