Bootstrap data-spy=scroll插件仅支持body标签？移至div失效求助

我在自定义项目时遇到一个问题：将data-spy="scroll"属性从body标签移到div标签后，滚动监听的导航高亮功能完全失效。按逻辑应该能正常运行，但显然有遗漏的配置细节，求帮忙排查。

可正常运行示例（请用全屏视图测试） #

CSS代码

body {
  position: relative;
}
ul.nav-pills {
  top: 20px;
  position: fixed;
}
div.col-8 div {
  height: 350px;
}
#section1 {color: #fff; background-color: #51004B;}
#section2 {color: #fff; background-color: #00318C;}
#section3 {color: #fff; background-color: #008C7F;}
#section4 {color: #fff; background-color: #1C8C00;}

HTML代码

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-4" id="myScrollspy">
      <ul class="nav nav-pills flex-column">
        <li>
          <a class="nav-link active" href="#section1">Section 1</a>
        </li>
        <li>
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
        <li>
          <a class="nav-link" href="#section3">Section 3</a>
        </li>
        <li>
          <a class="nav-link" href="#section4">Section 4</a>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="section1">    
            <h1>Section 1</h1>
            <p>Scroll down and note how the section on the left updates.</p>
        </div>
        <div id="section2"> 
            <h1>Section 2</h1>
            <p>Keep scrolling.</p>
        </div>        
        <div id="section3">         
            <h1>Section 3</h1>
            <p>Stuff related to section 3. Scroll down again.</p>
        </div>
        <div id="section4">         
            <h1>Section 4</h1>
            <p>Final section stuff. The navbar on the left is also on section 4.</p>
        </div>
    </div>
  </div>
</div>

</body>
</html>

无法运行示例 #

问题现象：滚动页面时，左侧导航的高亮切换功能失效

CSS代码

body {
  position: relative;
}
ul.nav-pills {
  top: 20px;
  position: fixed;
}
div.col-8 div {
  height: 350px;
}
#section1 {color: #fff; background-color: #51004B;}
#section2 {color: #fff; background-color: #00318C;}
#section3 {color: #fff; background-color: #008C7F;}
#section4 {color: #fff; background-color: #1C8C00;}

HTML代码

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body >
 <div data-spy="scroll" data-target="#myScrollspy" data-offset="50">
  <div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-4" id="myScrollspy">
      <ul class="nav nav-pills flex-column">
        <li>
          <a class="nav-link active" href="#section1">Section 1</a>
        </li>
        <li>
          <a class="nav-link" href="#section2">Section 2</a>
        </li>
        <li>
          <a class="nav-link" href="#section3">Section 3</a>
        </li>
        <li>
          <a class="nav-link" href="#section4">Section 4</a>
        </li>
      </ul>
    </nav>
    <div class="col-sm-9 col-8">
      <div id="section1">    
            <h1>Section 1</h1>
            <p>Scroll down and note how the section on the left updates.</p>
        </div>
        <div id="section2"> 
            <h1>Section 2</h1>
            <p>Keep scrolling.</p>
        </div>        
        <div id="section3">         
            <h1>Section 3</h1>
            <p>Stuff related to section 3. Scroll down again.</p>
        </div>
        <div id="section4">         
            <h1>Section 4</h1>
            <p>Final section stuff. The navbar on the left is also on section 4.</p>
        </div>
    </div>
  </div>
 </div>
</div>
</body>
</html>

问题原因与修复方案 #

核心原因

Bootstrap的滚动监听组件要求绑定data-spy="scroll"的容器满足两个条件：

1. 必须设置position: relative（作为计算滚动位置的基准）
2. 该容器必须是滚动事件的触发主体——要么自身有滚动条（需设置overflow-y: auto和固定高度），要么监听的是它的滚动事件

你把data-spy移到div后，这个div既没有设置position: relative，页面的滚动事件还是在body上触发，导致滚动监听无法捕获正确的滚动位置。

修复方案一：改造容器样式

给绑定data-spy的div添加必要样式，让它成为滚动容器：

.scroll-spy-wrapper {
  position: relative;
  height: 100vh;
  overflow-y: auto;
}

修改HTML中的div：

<div class="scroll-spy-wrapper" data-spy="scroll" data-target="#myScrollspy" data-offset="50">

这样div会成为滚动主体，滚动监听就能正常工作。

修复方案二：手动初始化滚动监听

如果不想改变页面的滚动容器（依然用body滚动），可以通过JS手动指定监听body的滚动，并指向内容容器：

$(function() {
  $('body').scrollspy({
    target: '#myScrollspy',
    offset: 50,
    spyTarget: $('[data-spy="scroll"]')
  });
});

Bootstrap 4的scrollspy会自动监听data-spy容器的父滚动元素，手动初始化可以强制绑定到body。

额外注意事项

• 导航容器（#myScrollspy）需保持固定定位（你已设置position: fixed，此部分无问题）
• 每个section的id必须和导航链接的href属性完全匹配，不能有拼写错误
• 若页面有动态加载内容，需调用$('[data-spy="scroll"]').scrollspy('refresh')刷新监听

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