popup - マウスのスクロールをモーダルに制限するには?

Question

スクロール可能なコンテンツを含むモーダルがあり、overflow-y: scroll; を使用して正常に動作します。

問題は、マウス ホイールを使用してモーダル内をスクロールし、コンテンツの最後に到達すると、メイン ページがスクロールすることです。私のクライアントは、これが起こらないようにするように私に依頼しました。これは可能ですか？

Answer 1

これを実現するために、モーダルの「表示」イベントと「非表示」イベントを使用しました。私は Twitter Bootstrap モーダルを使用しているので、これらのイベントがありますが、優れたモーダル プラグインにはそれらがあると思います。「表示」イベントでは、本文のスクロールを削除する関数をバインドしました。「非表示」イベントについては、それを再度有効にする関数をバインドしました。これが私がそれをした方法です：

modal = $('#myModal');
modal.on('show', function () {
    // disable background scrolling
    $('body').css('overflow', 'hidden');
});
modal.on('hide', function () {
    // enable background scrolling
    $('body').css('overflow', 'auto');
});

もちろん、選択したコンテナでスクロールを無効/有効にすることができます。お役に立てれば。