jQuery draggable div makes overflow:hidden page scroll

Question

I setup a draggable div with the .draggable() UI from jQuery's site. My main container div is set to be the width and height of the window with overflow:hidden so there will never be a scrollbar on the page. My problem is that when I start dragging my draggable div off the page it makes my page scroll (which I do not want). Here is my code:

 html, body{
   margin:0 auto;
   overflow:hidden;
   }

 #container #date-box{
position:absolute;
cursor:pointer;
background:url(/img/EWI/login/date-box.png) no-repeat;
width:247px;
height:21px;
z-index:9999;
margin:40px 0 0 15px;
}

  $("div#container div#date-box").draggable();

Please help!!!!

Answer 1

you need to contain your draggable div :)

$("div#container div#date-box").draggable({ containment: '#containmentDivId', scroll: false });

Answer 2

http://jqueryui.com/demos/draggable/#option-scroll

The default value is set to scroll your container. set the option in .draggable({"scroll":false});