How can i lock the main document's scrollbar and force a certain div's scrollbar to be used instead?

Question

i would like to be able to lock the scrollbar and have a different one used instead.

this is because i have an overlay div

.overlay {
    opacity: .8;
    filter: alpha(opacity=80);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 600;
    display: none;
    background: #000;
}

and a popup div on top of it, but for some reason, any scrolling done outside of the popup div scrolls the main page, which i would like to be frozen. in fact, instead of freezing the scrolling outside of the popup, i would like to 'redirect' the scroll to the popup, so scrolling can be done anywhere on the page. is that possible? it's probably not css, so i'm guessing it'll have to be javascript (hopefully jquery). any ideas will be greatly appreciated.

thanks!

Answer 1

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Answer 2

Try to use position: fixed; instead.