主页 / 问题 / 849440
Accepted
zoinx2012
Asked:2020-07-03 06:14:06 +0000 UTC2020-07-03 06:14:06 +0000 UTC

如何在 JavaScript 中计算用户滚动了多少距离？

  • 772

我想计算用户以像素为单位来回滚动了多少，以了解他的行为。我怎样才能做到这一点？

javascript

2 个回答

  1. Best Answer

    我想计算用户以像素为单位来回滚动了多少，以了解他的行为。我怎样才能做到这一点？

    这是一个变体，计算。

    var distance = 0;
window.onscroll = function(e) {
  distance +=window.scrollY;
  console.log(distance); // В пикселях
};
    .container {
  width: 100%;
  height: 1000px;
  background: red;
}
    <div class="container">&nbsp;</div>

    • window.onscroll - 滚动事件。
    • window.scrollY - 垂直滚动的像素数。

    升级版：

    var distance = 0;
var total = 0;
window.onscroll = function(e) {
  distance += window.scrollY - distance;
  total += distance;
  console.info(distance, total); // В пикселях
};
    .container {
  width: 100%;
  height: 1000px;
  background: red;
}
    <div class="container">&nbsp;</div>

    • 1

  2. 如果它对某人有用，我会折腾我的 5 美分：

    let divScrollEnabled = document.querySelector('.test'),
  wheel = "wheel" || "mousewheel" || "MozMousePixelScroll",
  count = 0,
  scrollTo = e => {
    let delta = e.deltaY || e.detail || e.wheelDelta;
    count += (delta > 0) ? Math.abs(delta) : Math.abs(delta);
    console.log(count);
  };
(divScrollEnabled.addEventListener) ?
divScrollEnabled.addEventListener(wheel, scrollTo):
  divScrollEnabled.attachEvent(wheel, scrollTo);
window.onunload = () => divScrollEnabled.removeEventListener('mousewheel', scrollTo) ||
  divScrollEnabled.detachEvent(wheel, scrollTo);
    .test {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 1px solid black;
  background: #42A5F5;
}
    <div class="test">Крути, Форест! КРУТИ!</div>

    • 0

相关问题