javascript - 非线性滚动

Question

滚动s就像是线性的：

s(x) = x             with x among [0, ∞]

我想应用一个更花哨的功能，比如x^2：

但我真的不知道这是否可能以及如何...

我想知道你对此的想法。

编辑

例如：是否可以在滚动时更改scrollTop值？

干杯。

Answer 1

解决问题的高级方法：

1. 捕获滚动​​事件，跟踪您获得最后一个事件的时间

2. 根据到最后一个事件的时间计算实际速度vA

   vA(dT):
       // if we last scrolled a long time ago, pretend it was MinTime
       // MinTime is the dT which, when scrolled
       // at or less than, behaves linearly
   
       if (dT > MinTime) dT = MinTime
       vA = MinTime / dT
   

3. 设计一些转换以在vA上执行以获得所需的速度vD：

   vD(vA):
       // quadratic relationship
       vD = vA * vA 
   

4. 计算“滚动因子” fS ，即vD与vA的比率：

   fS(vD, vA):
       // this step can be merged with the previous one
       fS = vD / vA 
   

5. 使用fS和dSi计算增量滚动dS，即初始滚动大小（1 个滚动事件的滚动价值）

   dS(fS):
       dS = fS * dSi
   

6. 滚动那么多

   Scroll(dS)
   

如果每个 MinTime 滚动少于一次或更慢，您将获得典型的线性行为。如果您尝试更快地滚动，您将按照实际滚动速度进行二次滚动。

我不知道如何使用 javascript 实际执行此操作，但我希望它提供了一个开始的地方。

有没有我可以使用的滚动单位？我的术语看起来很有趣。

Answer 2

这应该有助于捕获鼠标滚轮“速度”：

$(document).on('DOMMouseScroll mousewheel', wheel);


function wheel (event) {

  var delta = 0;

  if (event.originalEvent.wheelDelta) {
    delta = event.originalEvent.wheelDelta/120;
  } else if (event.originalEvent.detail) {
    delta = -event.originalEvent.detail/3;
  }

  if (delta) {
    handle(delta, event.currentTarget);
  }

  if (event.preventDefault) {
    event.preventDefault();
  }

  event.returnValue = false;
}

function handle (delta, target) {

   // scrollYourPageDynamiclyWithDelta(delta*delta);
   // manipulate of scrollTop here ;)

}

Answer 3

所以这更具概念性，但我认为使用其他人提到的功能来检测滚动速度，这可能会有所帮助。

逻辑：

1. 禁用在 div 上滚动的默认值。
2. 添加第二个 div，它只使用 @Tamlyn 的代码检测鼠标滚轮速度。也许你可以把这个 div 放在你的工作 div 后面，或者以某种方式将它包裹在你的内容周围或里面。我现在试着把它放在一边。
3. 接下来，根据第二个 div 的输入滚动 div。使用您的自定义滚动功能来更改滚动速度和滚动方向。这里可能会有一些“细节时刻的魔鬼”。