[解決済み] DIV要素をスクロールさせたときにページがスクロールしないようにするには？

質問

divの中にいる間、ボディのスクロール機能を防ぐためのさまざまな関数を見直し、テストし、機能するはずの関数を組み合わせました。

$('.scrollable').mouseenter(function() {
    $('body').bind('mousewheel DOMMouseScroll', function() {
        return false;
    });
    $(this).bind('mousewheel DOMMouseScroll', function() {
        return true;
    });
});
$('.scrollable').mouseleave(function() {
    $('body').bind('mousewheel DOMMouseScroll', function() {
        return true;
    });
});

• コンテナ内でスクロールできるようにしたいのですが、これはすべてのスクロールを停止しています。
• これはまた、マウスを離したときに無効化されません。

何かアイデア、またはこれを行うためのより良い方法はありますか？

どのように解決するのですか？

更新2: 私の解決策は、ブラウザのネイティブスクロールを完全に無効にし（カーソルがDIV内にあるとき）、JavaScriptでDIVを手動でスクロールする（DIVの .scrollTop プロパティを設定することによって）。代替とIMOより良いアプローチは、ページスクロールを防ぐためにブラウザのスクロールを選択的に無効化するだけで、DIVのスクロールはしません。この解決策を実演している以下のRudieの回答をチェックしてみてください。

はい、これです。

$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});

ライブデモです。 https://jsbin.com/howojuq/edit?js,output

つまり、手動でスクロール位置を設定し、デフォルトの動作（DIVまたはWebページ全体をスクロールする）を防ぐだけです。

更新 1: Chrisが下のコメントで指摘しているように、新しいバージョンのjQueryでは、デルタ情報は .originalEvent オブジェクト内にネストされています。つまり、jQueryはカスタムイベントオブジェクトでそれを公開しなくなり、代わりにネイティブイベントオブジェクトからそれを取得する必要があります。