"scroll" 事件侦听器不工作

Question

我目前正在开发一个 vanilla JS 插件，我需要在滚动时更新一个值，所以我将一个事件侦听器附加到文档以触发一个应该更新上述值的函数。

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

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

var currentPosition = 0;

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

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

这里有一个fiddle让它更清楚一点：JSFIDDLE

我尝试在正文和 window 上附加事件侦听器，这没有任何区别。

Answer 1

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

Answer 2

您正在使用 updatePosition() 直接调用一个函数，那是因为您在页面开始时触发函数，您必须仅使用函数名称 updatePosition.

附加和处理程序

代码：

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

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

"scroll" 事件侦听器不工作

"scroll" event listener not working

html

javascript

events

event-handling

javascript-events