Always scroll a div element and not page itself

Question

I have a page layout with an inner

element which contains the important stuff on the page. The important part about the design is:

Answer 1

I found a solution... Not perfect... http://jsfiddle.net/fGjUD/6/.

CSS:

body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

JS (jQuery):

if ($("body").height() > $(window).height()) {
    var top;
    $('#scrolldiv').mouseenter(function() {
        top = $(window).scrollTop();
        $('body').addClass('noscroll').css({top: -top + 'px'});
    }).mouseleave(function() {
        $('body').removeClass('noscroll');
        $(window).scrollTop(top);
    });
}

The text wrapping problem can be solved putting the whole content in fixed-width div. There is another bug for IE browser. If the page has center-aligned backgrond, it will move left-right on mouseenter on #scrolldiv