Disable (not hide) main scroll bar on mouseover of an element with javascript/css?

Required behaviour: on mouseover of an element I would like to disable main browser window scrolling or at least doing so with the mousewheel. I want to keep the visibility of the scroll bars while they are disabled.

Reason: The page is approximately twice the height of the browser window. There is a div with scr开发者_运维技巧oll bars. When scrolling with the mouse on the div and the bottom or top of the list is hit the main window starts to scroll. This is unwanted behaviour because often the main window scroll will either move the divs content on the screen or even scroll it off the screen completely which is very annoying. I would like to be able to mouse scroll to the bottom of the div without the main window scroll taking over and then scrolling the div out of view. The reason I would like any disabled scroll bars to stay visible is because if they are hidden the width of the page stretches to fit the gap making content jump/move which is unsightly and also problematic for mouseovers.

Is this possible using javascript/css but not jquery?

using jquery you can let the page sroll to the last position you had when the mouse entered the other scrolling zone:

    var scrolltop = 0;
    var handler = function(ev){$(window).scrollTop(scrolltop)};

    $(element).bind("mouseover", function(ev){ 
        scrolltop = $(window).scrollTop();
        $(window).bind("scroll",handler);
    });

    $(element).bind("mouseout", function(ev){ 
        $(window).unbind("scroll",handler);
    });

where element is the other scrolling zone