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

Count how far a user has scrolled from the top of the page or from the left of the page

本文关键字：滚动 距离 顶部 用户 计算      更新时间：2023-09-26

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

这是一个我尝试过的代码，但在我滚动时不计算在内。

http://jsfiddle.net/cz9zG/

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

HTML:

<p> 
  Distance from top = <span id="windowTop"></span>
  <br/>
  Distance from left = <span id="windowLeft"></span>
</p>

CSS：

body {height:2000px; width:2000px;}
p {position:fixed;}

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;
...
}
相关文章：