拖动项目时,Javascript(jQuery)禁用页面滚动

Question

我有一个类似于小部件的系统,其中的小部件可以被拖动(使用jQuery draggable/sortable).现在的问题是,当用户拖动其中一个小部件并将光标移动到边缘时,父div将滚动到光标的方向.

简化的布局如下:

<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>

有没有什么办法可以禁止页面滚动？

Answer 1

尝试添加overflow:hidden;page_wrapper 的 css。