当用户滚动窗口时,我想在Plunk示例中使用$(window).scroll
函数来更改变量:
$(document).ready(function(){
$(window).scroll(function(){
document.getElementById('myResults').innerHTML = $(window).scrollTop();
});
});
所需的行为是#myResults
将从其默认的html值更改,并在每次发生任何滚动时更新为当前的$(window).scrollTop();
值。
但我无法让它发挥作用。我不认为是Angular路由模块造成了问题,因为我创建了第二个例子,其中#myResults
元素被渲染为视图的一部分,它仍然可以正常工作。我的主要例子是通过视图渲染的,但不能工作。。。第一个例子有什么不同?我怎样才能让第一个例子发挥作用?
在第一个示例中,window
不是滚动条所应用的对象。
而是以下<div>
:
<div id="targetDiv" data-ng-controller="MainCtrl" class="ng-scope">
定位为填充视口,并允许在其内容溢出其维度时滚动:
// Main Panel Styling (line 229 of main.less)
#targetDiv{
/* ... */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
/* ... */
}
您必须为事件和当前值引用此元素,才能对滚动的内容做出反应:
$(document).ready(function(){
$('#targetDiv').scroll(function(){
document.getElementById('myResults').innerHTML = $('#targetDiv').scrollTop();
});
});