引导3.1附加滚动间谍内容保持可见时，使用溢出

Bootstrap 3.1 affix scroll-spy content staying visible when using overflow

本文关键字：溢出 滚动 间谍 引导      更新时间：2023-09-26

我正在使用bootstrap 3.1和scroll-spy在侧边栏中实现一个目录(TOC)。它通常工作得很好，但有时我有足够的页面内容，TOC变得太长，无法完全呈现在视窗中。因此，我将高度调整为100%，并设置overflow-y: 100%，这样用户至少仍然可以滚动整个TOC。

然而，当用户向下滚动页面时，突出显示的元素从TOC的可见视图中"滚动"出去，所以问题是，一旦用户向下滚动到足够远的地方，TOC中的突出显示不再可见，我如何才能随着页面滚动TOC内容?

<div id='sidebar', style="height: 100%; overflow-y: auto">
  <div id='toc' data-offset-top='250' data-spy='affix'>
    <ul class='nav'>
      <li class='active'><a href="#toc-title">Example</a></li>
      <li><a href="#toc-title">Example 2</a></li>
      <!-- Lots more links here -->
    </ul>
  </div>
</div>

最简单的方法是安装jquery插件animatesscroll: http://plugins.compzets.com/animatescroll/，然后使用以下代码:

$('#sidebar').on('activate.bs.scrollspy', function () {
  item = $('#toc').find(".active").first();
  item.animatescroll({element: '#toc', padding:20});
});

这将使活动的目录行保持可见。activate.bs.scrollspy在每次新项目激活时被触发，animatesscroll调用将其移动到(在本例中)距顶部20px的位置。

相关文章：