“滚动”事件侦听器不起作用答案

【问题标题】："scroll" event listener not working“滚动”事件侦听器不起作用
【发布时间】：2015-10-04 14:36:19
【问题描述】：

我目前正在开发一个香草 JS 插件，我需要在滚动时更新一个值，所以我在文档中附加了一个事件监听器来触发一个应该更新上述值的函数。

问题是，它适用于文档加载，但不适用于滚动。好像滚动事件根本不起作用。

目前，我的 JS 部分看起来像这样：

var currentPosition = 0;

var updatePosition = function() {
  currentPosition = document.body.scrollTop;
  document.getElementById('indicator').textContent = currentPosition;
};

document.addEventListener('scroll', updatePosition());

这里有一个小提琴让它更清楚一点：JSFIDDLE

我尝试在主体和窗口上都附加事件侦听器，但没有任何区别。

【问题讨论】：

标签： javascript html events javascript-events event-handling

【解决方案1】：

您正在使用updatePosition() 直接调用函数，这是因为您的函数在页面开始时触发，您必须仅使用函数名称updatePosition 进行附加和处理。

代码：

document.addEventListener('scroll', updatePosition);
                                                  |-- no () here

演示：http://jsfiddle.net/IrvinDominin/dyy6z35s/

【讨论】：

非常感谢。正确、简洁！

【解决方案2】：

var currentPosition = 0;

var updatePosition = function() {
  currentPosition = window.pageYOffset || document.documentElement.scrollTop;      
  document.getElementById('indicator').textContent = currentPosition;    
};

document.addEventListener('scroll', updatePosition);

http://jsbin.com/seqecezecu/1/edit?js,console,output

【讨论】：