How to control overlay content with browser Scrollbar

Question

I am using jquery.tools.min.js for overlay and it is working fine.

What I want is when content open in overlay and content exceeds height wise then browser scroll-bar can move up and down to overlay content, is this possible?

My overlay css and js is shown below:

 #overlay {
    color:#efefef;
    display:none;
  }
  div.contentWrap {
    overflow-y:auto;
  }

.apple_overlay {
    display:none;
    width:660px;
    padding:35px;
    font-size:11px;
}

---

$("a[rel]").overlay({
    top : 10 ,
        mask: {
        color: '#fff',
        loadSpeed: 200,
        opacity: 0.9
    },
    onBeforeLoad: function() {
        $(".contentWrap").html('');
        $(".contentWrap").html('<img src="/public/images/ajax-loading.gif" />');
        var wrap = this.getOverlay().find(".contentWrap");

        wrap.load(this.getTrigger().attr("href"));
    }

});