jquery - ポップアップ-マウスホイールでスクロール

Question

非表示のdivがあり、リンクをクリックしてモーダルポップアップのように開きます。Divコンテンツはスクロール可能ですが、マウスホイールをスクロールにバインドできません。

私はjquery.mousewheel.jsからこのコードを試しました：

$('#previewFrame').mousewheel(function(event, delta, deltaX, deltaY) {
    console.log(delta, deltaX, deltaY);
});

Answer 1

私はそのような解決策を見つけました：コンテンツを含むdivの上に、「overflow：scroll」を含む別の透明なdivを配置します。これにより、キャッチされたイベントがjScrollPaneに渡されます。

// transfer mousewheel events to jScrollPaneContainer
$('#previewHider').mousewheel(function(event, delta, deltaX, deltaY) {
    $(this).next().find('div.jScrollPaneContainer').eq(0).trigger('mousewheel', delta);
});

Answer 2

これを試して

$('#previewFrame').bind('mousewheel', function(event, delta, deltaX, deltaY) {
    console.log(delta, deltaX, deltaY);
});

Answer 3

これはあなたのためのトリックをするはずです：

$(document).ready(function(){

    $('#previewFrame').bind('mousewheel', function(e){
        if(e.wheelDelta/120 > 0) {
            $(this).text('scrolling up');
        }
        else{
            $(this).text('scrolling down');
        }
    });
});

ワーキングデモ