非线性滚动

Question

滚动的s就像线性的：

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

​

​

我想申请更花哨的功能，x^2说

​

​

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

我想知道你对此的看法。

编辑

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

干杯。

Answer 1

对你的问题采取高层次的方法：

1. 捕捉滚动事件，跟踪最后一个事件发生的时间。
2. 基于最后事件时间的实际速度vA计算 vA (dT )：//如果我们最后一次滚动是很久以前，假装是MinTime // MinTime是当滚动// at或小于时，行为线性如果( dT > MinTime) dT = MinTime vA = MinTime / dT
3. 设计一些在vA上执行的转换，以获得所需的速度vD： vD( vA )：//二次关系vD = vA *vA
4. 计算一个“滚动因子”fS，vD与vA的比率： fS( vD，vA)：//此步骤可以与前面的步骤fS =vD/ vA合并
5. 使用初始滚动大小(1滚动事件的滚动值)使用dS和fS计算增量滚动的值。 dS( fS )：dS =fS* dSi
6. 翻滚那么多 卷轴(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。使用您的自定义滚动功能可以改变滚动速度和滚动的方向。这里可能会有一些“细节时刻的魔鬼”。