3

ここで探しているコードがわかりません-CSSで実現できるかどうか疑問に思いますが、おそらくjavascriptだと思います

状況： div（幅と高さが固定されている）があります-このdivの内容は、親の幅と高さの両方を超えているため、垂直方向と水平方向にスクロールバーがあります。

影響する動作： 垂直スクロールバー上でマウスを押したまま上下に引くと、コンテンツが垂直方向にスクロールします。水平スクロールでマウスを押したまま左または右に移動すると、コンテンツが水平にスクロールします。これは私が知っているデフォルトの予想される動作です。私の質問が明確になるように正確にしています。

質問： 私がやりたいのは、これらの動作を直接交換することです。

垂直スクロールバー上でマウスを押したまま上下に引くと、コンテンツが水平方向にスクロールします

と

水平スクロールでマウスを押したまま、左または右に移動すると

これが悪い考えである理由はかなり明白ですが、これを実証できる必要があり、例を見つけることができないようです。マウスを垂直に回転させたり、頻繁に表示されるようなものを使用したりするときに、ページを水平方向にスクロールすることは考えていません。単に、垂直方向と水平方向のスクロールバーの動作を入れ替えたいだけです。

必要に応じてコードを投稿できますが、状況はかなり一般的だと思います。水平スクロールバーと垂直スクロールバーを備えたdivだけです。

どんな助けでも大歓迎です

4

1 に答える 1

1

これは間違いなく可能です。最初は、不可能であるか、さまざまなことに多くの回避策が必要になると思いましたが、jsFidle でこれを作成しました。

jsFiddle の例

これが機能する理由は、スクロール イベントが発生するたびに、2 つの変数cur_leftとcur_top.

次に、 と を使用して、両方のスクロール バーの新しいスクロール位置を設定しnew_leftますnew_top。

この情報を使用して、単純に if をチェックするだけで、どのスクロール バーが最初に操作されたかをチェックする関数を使用しますorig_left != cur_left。

次に、どのイベントが最初に発生したかを基準にして、新しいスクロール位置を設定するだけです。また、正確な位置と、どのイベントが発生しているかを例の下に配置しました。

これがあなたが望んでいたものであり、理解しやすいことを願っています。そうでない場合は、コードを改良します!

ノート

  • meetamit が指摘したように、これは多くのハンドヘルド デバイスでは機能しません。これは、タッチ スクロールが機能する方法のためです。
  • この例は、使いやすいように jQuery でコーディングされています


  • この例は、コンテンツの高さと幅の例が同じでない場合は機能しません。

    幅 = 250px; 高さ = 200px;

    これは、垂直方向にスクロールする場合、水平スクロール バー全体で 200px までしかスクロールしません。

  • これはFrontmotion Firefoxでのみテストされました

編集

私の出力ボックスでは、常に top と表示され、left とは表示されないことに気付きました。これは、イベントが非常に高速に発生するため、top を after left に設定したため、変更が表示される前にターゲット変数が上書きされてしまうためです。これをデバッグconsole.log()して、関数に a を入れるだけで、それが表示されることが確実にわかります

于 2012-10-24T22:51:11.743 に答える