如何使用 Twitter Bootstrap ScrollSpy 执行功能答案

【问题标题】：How to use Twitter Bootstrap ScrollSpy to execute a function如何使用 Twitter Bootstrap ScrollSpy 执行功能
【发布时间】：2019-08-11 02:01:36
【问题描述】：

我想在 ScrollSpy 收到通知后加载更多数据。但我看不到如何捕获该事件并执行函数。

【问题讨论】：

标签： twitter-bootstrap scroll dom-events

【解决方案1】：

更新这个触发器现在已经被推送到主版本中。你可以在完整的文档中看到它。 http://twitter.github.com/bootstrap/javascript.html#scrollspy

github 上的工作分支中有一个更新会触发激活回调。

参考文献

https://github.com/twitter/bootstrap/issues/2482

一旦你抓住了激活触发器，你就可以这样称呼它：

$("#nav li").on('activate', function() {
   //do stuff
});

【讨论】：

【解决方案2】：

这适用于 Bootstrap 4（测试版 3）：
一般来说，Scrollspy 事件的用法与 Bootstrap 3 相比没有变化。正如 Scrollspy 文档的 Events 部分所述，activate.bs.scrollspy 事件将在滚动元素上触发 - 带有 data-spy="scroll" 的元素– 每当新项目被 Scrollspy 激活时。你可以这样听：

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function(event) {
    console.log('activate.bs.scrollspy', event);
})

但是！
没有记录，当在 <body> 元素上使用 Scrollspy 时，activate.bs.scrollspy 事件将仅在 window 对象上可用。
因此，在这种相当常见的情况下，您可以像这样捕获 Scrollspy 事件：

$(window).on('activate.bs.scrollspy', function (event) {
    console.log('activate.bs.scrollspy', event);
})

【讨论】：

【解决方案3】：

对于引导程序 3，您可以这样做 (docs)

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

【讨论】：