javascript - 非線形スクロール

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. 目的の速度vDを取得するために、 vAで実行する変換を考案します。

   vD(vA):
       // quadratic relationship
       vD = vA * vA 
   

4. vAに対するvDの比率である「スクロール係数」fSを計算します。

   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 ごとに 1 回未満またはそれより遅い速度でスクロールすると、典型的な直線的な動作が得られます。より速くスクロールしようとすると、実際のスクロール速度で二次的にスクロールします。

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 のコードを使用して、マウス ホイールの速度を検出する 2 つ目の div を追加します。おそらく、この div を作業中の div の後ろに配置するか、何らかの方法でコンテンツの周りまたは内部にラップすることができます。とりあえず脇に置いてみます。
3. 次に、この 2 番目の div からの入力に基づいて div をスクロールします。カスタム スクロール機能を使用して、スクロール速度に基づいて、スクロールの方向を変更します。ここにはおそらく「細部の悪魔」がいるでしょう。