Question

我想制作一个Javascript函数，该函数最终将随着用户滚动更新计算来使div动画化。

我的目的是通过增加一个数字来实现，最初从0到20。一旦20为值，则需要识别该数字，然后将该值从20递减为-20（例如）

目前，我有一个函数可以在向下滚动页面时向上计数，然后在向上滚动时将再次向下计数，但是我不确定如何最好地使这些值在数字达到{用户滚动时，{1}}和20。

-20

Answer 1

正如我在评论中所说-当达到20时，您的div会开始发抖/弹跳，并将使您的用户感到癫痫发作。这种行为有点怪异。

let scrollCount = 0;
let direction = 1;

window.addEventListener("mousewheel", function (e) {

  if (e.wheelDelta < 0) {
    scrollCount += direction
    if (scrollCount === 20 || scrollCount === -20) {
      direction *= -1
    }
  }
  else if (e.wheelDelta > 0) {
    scrollCount -= direction
    if (scrollCount === 20 || scrollCount === -20) {
      direction *= -1
    }
  }


  let x = scrollCount * window.innerWidth
  let y = 30 * window.innerHeight

  // moveEye(irisLeft, x, y)
  // moveEye(irisRight, x, y)

  console.log(scrollCount)

});

Answer 2

我认为使用PageOffset是更好的选择。

var scrollTop = window.pageYOffset;

这将为您提供滚动位置的绝对px值。尽管它不在[-20,20]范围内，但是您可以对其进行数学缩放（最小-最大缩放）。

Scaling Answered Here

将小数位数舍入为整数就可以了。

递增到最大数量，然后递减到最小数量

2 个答案: