非线性滚动

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 实际做到这一点，但我希望它提供了一个起点。

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