非线性滚动

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计算delta滚动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. 使用@Tamlyn的代码添加第二个仅检测鼠标滚轮速度的div。 也许你可以把这个div放在你工作的div之后，或者把它包裹在你的内容中或者在你的内容中。 我现在试着把它放在一边。
3. 接下来，根据第二个div的输入滚动div。 使用自定义滚动功能可以更改滚动速度和滚动方向。 这里可能会有一些“细节时刻的恶魔”。