Javascript 非线性滚动

滚动

s

就像是线性的：

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

我想申请，比如说

x^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

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

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

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

滚动那么多

Scroll(dS)

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

我不知道如何使用javascript来实现这一点，但我希望它提供了一个起点

---

是否有一个滚动的单位，我可以随时使用？我的术语看起来很有趣。

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

$(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 ;)

}

---

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

逻辑：

禁用在div上滚动的默认设置

添加第二个div，使用@Tamlyn的代码检测鼠标滚轮速度。也许你可以把这个div放在你的工作div后面，或者用某种方式把它包起来或者放在你的内容里面。我想暂时把它放在一边

接下来，根据第二个div的输入滚动div。使用自定义滚动功能更改滚动速度和滚动方向。这里可能会有一些“细节中的魔鬼时刻”

---

为什么呢你想做什么？我想OP是想改变滚动速度，使之成为距页面顶部距离的函数。我想OP是想改变滚动速度，使之成为滚动轮移动速度的非线性函数。@darksky有很多方法可以在不需要任何东西的情况下达到这个效果就像你描述的那样。@dqhendricks我对学习它们很感兴趣。在我看来，浏览器在通知DOM之前会处理硬件事件。例如，当浏览器捕捉到来自鼠标的滚动事件时，它将通过移动页面进行处理，然后才将滚动事件通知DOM。这意味着，即使你可以捕捉滚动事件，计算滚动速度，等等，当你尝试设置

scrollTop

时，页面已经移动了。该死，现在“滚动”这个词看起来真的很有趣。谢谢你！不确定是否理解所有变量都引用。。。

dT

是最后两次滚动事件之间的时间吗？

MinTime

是常数吗（如果是，也许你可以将其表示为caps lock，例如：

MinTime

）？“有滚动的单位吗？”哼哼着，

元素。scrollTop

位于

px

dT是增量时间的简写，在处理滚动事件时，是处理上一个事件后的时间。MINTIME或MINTIME或任何你想称之为它的东西都是一个常数，值由你选择。我可能会走1/2秒。@Abenier:我想我会叫它blit。

dS(fS):
    dS = fS * dSi

Scroll(dS)

$(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 ;)

}