非线性滚动

Question

滚动s就像是线性的：

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

我想申请a more fancy function，说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滚动事件的滚动值）< / p>

   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。使用自定义滚动功能可以更改滚动速度和滚动方向。这里可能会有一些“细节时刻的恶魔”。