Javascript (jQuery) disable page scroll when dragging items

Question

I have a widget-like system with widgets that are able to be dragged around (with jQuery draggable/sortable). The problem is now that when a user drags one of those widgets and moves the cursor on the edge, the parent div scrolls to the direction of the cursor.

A simplified layout is as follows:

<div id="wrapper" style="width:WINDOW_WIDTH;">
  <div id="page_wrapper" style="width:10000px;">
    <div class="widget_page" style="width:WINDOW_WIDTH;">
      <div class="widget draggable"></div>
      <div class="widget draggable"></div>
      <div class="widget draggable"></div>
    </div>        
    <div class="widget_page" style="width:WINDOW_WIDTH;">
      <div class="widget draggable"></div>
      <div class="widget draggable"></div>
      <div class="widget draggable"></div>
    </div>
  </div>
</div>

is there any way i can disable the page_wrapper from scrolling?

Answer 1

Try to add overflow:hidden; in the css of the page_wrapper.