ページではなくdivをスクロール

css javascript jquery lightbox scroll
ページではなくdivをスクロール

私が取り組んでいるWebサイトには、「ソースの表示」ボタンのような働きをするライトボックスがあります。 背景が暗くなりソースが表示されますが、その特定の「div」(またはこの場合は「pre」)の上にマウスがある場合にのみスクロールします。 たとえば、ページの上隅にマウスを置いて下にスクロールし、メインのライトボックスをスクロールしたい。 たくさんのコードがあるので、私は使用しました:

overflow-x: hidden;
overflow-y: scroll;

JavaScriptやjQueryが必要になると確信していますが、どこにいればいいのかわかりません。

下にスクロールして[完全なコードを表示]をクリックすると、http://css3framework.co.uk/ [このページ]で絶賛されています。

何か案は?

  1  3


ベストアンサー

最も簡単な方法は、http://jsfiddle.net/pimvdb/Ezvnp/3/です。

$('body').bind('mousewheel', function(e) { // on scroll
    var $div = $('div');

    // set div scroll top offset to current + extra from this scroll
    $div.scrollTop($div.scrollTop()
                    - e.originalEvent.wheelDelta);

    return false; // prevent body scrolling
});

スクロールをロック/ロック解除するには、変数を使用して、その変数が「true」の場合のみロックするようにすることができます(例:http://jsfiddle.net/pimvdb/Ezvnp/4/)。

var locked = true;

$('body').bind('mousewheel', function(e) {
    if(locked) {
        var $div = $('div');

        $div.scrollTop($div.scrollTop()
                        - e.originalEvent.wheelDelta);

        return false;
    }
});

$('button').click(function() {
    locked = !locked;
});

8


タイトルとURLをコピーしました