javascript - $(window).scroll(function() {...}) 未在 Bootstrap v3.2 中加载？

Question

我想在我的 Plunk 中使用 $(window).scroll 函数当用户滚动窗口时更改变量的示例:

$(document).ready(function(){   
  $(window).scroll(function(){
      document.getElementById('myResults').innerHTML = $(window).scrollTop();
  });
});

所需的行为是，#myResults 将从其默认 html 值更改，并在每次滚动时更新为当前的 $(window).scrollTop(); 值发生。

但我无法让它工作。我不认为是 Angular 路由模块导致了问题，因为我创建了 a second example其中 #myResults 元素呈现为 View 的一部分，并且仍然可以正常工作。我的主要示例是通过 View 呈现的，但不起作用...第一个示例有什么不同？请问如何才能使第一个示例正常工作？

Answer 1

在第一个示例中，window不是滚动条应用到的对象。

而是下面的<div> :

<div id="targetDiv" data-ng-controller="MainCtrl" class="ng-scope">

这是 positioned填充视口(viewport)并允许在其内容 overflows 时滚动其尺寸:

// Main Panel Styling (line 229 of main.less)

#targetDiv{
    /* ... */

    position: absolute;
    top:      0;
    bottom:   0;
    left:     0;
    right:    0;
    overflow: auto;

    /* ... */
}

您必须为事件和当前值引用此元素，才能对其滚动的内容使用react:

$(document).ready(function(){
  $('#targetDiv').scroll(function(){
    document.getElementById('myResults').innerHTML = $('#targetDiv').scrollTop();
  });
});