修复Bootstrap Scrollspy非Body元素二次点击异常问题

我看了你的代码和遇到的问题，核心问题出在Bootstrap Scrollspy默认监听window滚动，加上平滑滚动时的位置计算错误、点击事件的逻辑冲突，导致功能失效和异常行为。下面是具体的修复方案：

问题根源拆解 #

1. Scrollspy监听对象错误：默认情况下Scrollspy监听的是window的滚动事件，但你的滚动容器是section元素，必须明确指定scrollElement参数，否则Scrollspy无法感知容器内的滚动状态。
2. 滚动位置计算错误：offset().top是元素相对于整个文档的位置，而你需要的是元素相对于滚动容器section的位置，应该用position().top来获取。
3. 点击事件未阻止默认行为：浏览器会对锚点链接执行默认的跳转操作，这会和你的自定义平滑滚动逻辑冲突，引发第二次点击的异常。
4. Active类的逻辑冲突：手动添加/移除active类的时机和Scrollspy的自动激活逻辑互相干扰，导致状态更新混乱。

修复后的完整代码 #

HTML #

<section>
  <div id="nav" class="target-cstm">
    <ul class="nav">
      <li>
        <a href="#first">1st</a>
      </li>
      <li>
        <a href="#second">2nd</a>
      </li>
      <li>
        <a href="#third">3rd</a>
      </li>
      <li>
        <a href="#fourth">4th</a>
      </li>
    </ul>
  </div>
  <div id="first"> first div </div>
  <div id="second"> second div </div>
  <div id="third"> third div </div>
  <div id="fourth"> fourth div </div>
</section>

CSS #

#nav { 
  position: fixed; 
  right: 1em; 
  min-width: 10em; 
}
.active { 
  background-color: #f9f; 
}
div:not(#nav) { 
  height: 500px; 
}
section {
  height:200px; 
  position:relative; 
  overflow-y:scroll; 
  background:grey;
}

JavaScript #

// 初始化Scrollspy，指定滚动容器为section
$("section").scrollspy({ 
  target: ".target-cstm",
  scrollElement: $("section") // 关键：指定监听的滚动元素
});

$(document).on('click', 'a', function(event) {
  // 阻止浏览器默认锚点跳转行为，避免和自定义滚动冲突
  event.preventDefault();
  
  const target = $.attr(this, 'href');
  const $section = $('section');
  
  $section.animate({
    // 使用position().top获取元素相对于section的顶部距离
    scrollTop: $(target).position().top
  }, {
    duration: 300,
    complete: function() {
      // 手动触发滚动事件，让Scrollspy重新计算并更新active状态
      $section.scroll();
    }
  });
});

关键修改说明 #

1. 指定Scrollspy的scrollElement：通过scrollElement: $("section")告诉Scrollspy监听这个容器的滚动，这样它才能正确检测容器内元素的位置变化，同步更新导航的active状态。
2. 修正滚动位置计算：$(target).position().top获取的是元素相对于父容器（section）的顶部距离，这才是scrollTop需要的正确值，而offset().top是相对于整个文档的，会导致滚动位置偏移。
3. 阻止默认跳转：event.preventDefault()避免浏览器自动跳转到锚点，消除和自定义平滑滚动的冲突。
4. 手动触发滚动事件：在动画完成后调用$section.scroll()，强制Scrollspy重新计算当前滚动位置，确保手动点击和自动滚动的active状态保持一致。

这样修改后，Scrollspy就能在section容器内正常工作，平滑滚动和active状态的切换也都能正确执行了。

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