0

こんにちは、jQuery マウスホイール拡張機能を使用しています

そして、次のバインドを使用します

$('html').bind('mousewheel', function(event, delta) {
  window.scrollBy(-120 * delta, 0);
  return false;
});

デルタは、マウス ホイールの動きによって決定され、ページは水平方向にスクロールします。

テキストや画像がなく、通常はhtml要素がない空のスペースにカーソルを移動すると、マウスホイールの動きが突然反応しなくなる場合を除いて、すべて問題ありません。これは、バインドがどのように機能するかによるものだと確信しています。

私の理論をテストするために、非表示の 100% x 100% 固定位置 div を作成しました。スクロールは完全に機能します。これはハックのように思えますが、このコードの適切な実装について疑問に思っていました。

この関数をブラウザページ全体で呼び出すにはどうすればよいですか?

どうもありがとう！

更新: David は率先して、彼のコードでテスト ページを作成しました。彼と同じようにあなたにとってもうまくいくかどうか誰か教えてもらえますか? つまり、ポインターが赤い四角形の上にある場合にのみ、ページを水平方向にスクロールできます。

4

2 に答える 2

3

またはにバインドしようとしましたdocumentかwindow？

$(document).bind('mousewheel', function(event, delta) {
  window.scrollBy(-120 * delta, 0);
  return false;
});
于 2010-02-15T17:19:56.417 に答える
0

まったく同じ問題に遭遇し、なんとか解決しました。これを参照してください。

CSS

html,body
{
    width:100%;
    height:100%;
    overflow:hidden;
    margin:0;
    padding:0;
}

#wrapper
{
    width:100%;
    height:100%;
    overflow:auto;
}

マウスホイール イベントを #wrapper 要素に適用する必要があることに注意してください。

これにより、ラッパー要素は、html または body に依存する前に占有されていない可能性のあるスペースを保持できます。

幅はテーブルによって定義されていることに気付くかもしれませんが、これは水平方向の Web ページでの最良のアプローチであることがわかりました。

于 2013-02-28T17:45:36.433 に答える