0

より大きなレイアウトの一部としてオーバーフローするコンテンツがあり、通常はページよりも幅が広いです。オーバーフローしたコンテンツはコンテナーの 1 つによってクリップされますが、これは問題ありませんが、IE9 でクリッピング コンテナーをクリックし、マウス ベースの水平スクロール (タッチパッド、ウルトラナビ、強力なマウスを考えてください) を使用すると、コンテナー内のすべてのコンテンツが、クリップされたコンテンツの端が表示されます。これらのマウスが外側のコンテナーをスクロールできるようにしながら、この動作を防ぐ必要があります。その要素でスクロールイベントをキャプチャし、代わりにその親に渡すように思えますが、jQueryでそれを行う方法はまだわかりません。誰かがJS以外のソリューションを思いつくことができれば、それも素晴らしいでしょう。

更新: いくつかのプローブは次のことを明らかにします: 異なる HID は異なる方法でスクロール イベントを送信するため (私はあなたのシナプスを見ています)、常に発生する唯一のイベントはスクロール イベントです。スクロール イベントにはバブリング フェーズがなく、キャンセルできません。さらに、スクロール ハンドラーの一部として単純にスクロールを 0 に設定した場合の結果は良くありません。これにより、横方向にスクロールするための入力を生成できる大部分のデバイスで機能するすべての JavaScript ソリューションが事実上除外されます。次の攻撃方法は、クリック イベントです。クリックするとバブルが発生し、望ましくない動作が発生するためには、最初に問題のある overflow:hidden div をクリックする必要があります。フォーカスを防ぐことができれば、スクロール イベントの対象にはなりません。本当の秘訣は、リンクを機能させ続けることです。

問題を示すフィドルは http://jsfiddle.net/conartist6/tnmT3/6/です

HTML:

<div class="outer"><div class="ctnr"><div>Click in here and scroll r/l with wheel or midclick+drag. IE9 moves content, Chrome/FF do not.<div>The quick brown fox jumped over the lazy dog</div></div></div>
    <div style="width: 700px;">This should still scroll normally blah blah blah blah blah blah blah blah blah lajsof ijwjlk jdslf kjojfoj jjslfj sljfoi jdfoiaj ;lsajoi fejogro lfffos joidjgoe wqqqq</div></div>

CSS:

.outer
{
    width: 500px;
    overflow-x: scroll;
}
.ctnr{
    width: 300px;
    background-color: violet;
    overflow: hidden;
}
.ctnr > div
{
    position: relative;
    width: 200px;
    height: 200px;
    background-color: lightsteelblue;
}

.ctnr>div>div
{
    position: absolute;
    left:0;
    bottom: 0;
    width:400px;
    background-color: salmon;
    overflow: hidden;
}
4

1 に答える 1

1

私が質問を正しく理解していれば、これがあなたが探している答えになるはずです:

*スクロールできないようにしたいコンテナーの ID を使用します。

//Firefox uses a different event that is **not cancelable** for mousewheel, of course there is a work around
//Since you only need IE though, here it is:
$('#divID').on('mousewheel', function(event) { //for all browsers except Firefox
  event.preventDefault();
});

注: 私はタッチ パッドを使用しているため、これをテストすることはできませんが、動作すると確信しています。ただし、デフォルト アクションを防止する div (id タグを使用) のみをターゲットにしていることを確認してください。

今後の参考のために、DOM 要素、イベント、およびその他の DOM アーキテクチャ、および互換性を検索するための優れた Web サイトは、Dottoro Web Referenceです。

スクロール イベントはキャンセルできません。ここを参照してください。ただし、マウスホイールイベントは...だからここに

于 2013-02-17T21:22:48.923 に答える