Javascript 计算用户从页面顶部或页面左侧滚动的距离

JavaScript可以用来创建一个计数器，显示用户从页面顶部滚动了多远，或者他们从页面左侧滚动了多远

这是我尝试过的一段代码，但当我滚动时它不起作用

这是我正在使用的HTML、CSS和JavaScript，我试图在不使用jQuery的scrollTop函数的情况下解决这个问题

HTML:

JavaScript:

var top = window.pageYOffset || document.documentElement.scrollTop;

var left = window.pageXOffset || document.documentElement.scrollLeft;

window.onscroll = function() {
  document.querySelector('#windowTop').innerHTML = top;
  document.querySelector('#windowLeft').innerHTML = left;
}

---

将顶部和左侧声明移动到onscroll函数中：

window.onscroll = function() {

var top = window.pageYOffset || document.documentElement.scrollTop;

var left = window.pageXOffset || document.documentElement.scrollLeft;

...

}

---

非常感谢。我不知道我在想什么。我刚刚了解了querySelector，并认为我应该尝试在没有jQuery的情况下使用它。你认为这是一种非常有效的方法来计算页面左上角位置之间的距离吗？我想没有比这更好的方法了。为了使它更有效（我认为），通过将dom元素

#windowTop

和

#windowLeft

分配给

onscroll

函数外部的变量，可以缓存它们。

var top = window.pageYOffset || document.documentElement.scrollTop;

var left = window.pageXOffset || document.documentElement.scrollLeft;

window.onscroll = function() {
  document.querySelector('#windowTop').innerHTML = top;
  document.querySelector('#windowLeft').innerHTML = left;
}

window.onscroll = function() {

var top = window.pageYOffset || document.documentElement.scrollTop;

var left = window.pageXOffset || document.documentElement.scrollLeft;

...

}