Javascript（jQuery）在拖动项目时禁用页面滚动答案

【问题标题】：Javascript (jQuery) disable page scroll when dragging itemsJavascript（jQuery）在拖动项目时禁用页面滚动
【发布时间】：2012-02-28 21:01:30
【问题描述】：

我有一个类似小部件的系统，其中包含可以拖动的小部件（使用 jQuery 可拖动/可排序）。现在的问题是，当用户拖动其中一个小部件并将光标移动到边缘时，父 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>

有什么方法可以禁用 page_wrapper 的滚动？

【问题讨论】：

标签： javascript jquery draggable jquery-ui-sortable

【解决方案1】：

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

【讨论】：

这不起作用；当用户将小部件拖动到屏幕边缘时，“
”仍然会滚动
你能提供一个jsfiddle吗？这就是这个css应该如何工作w3schools.com/cssref/…
jsfiddle.net/rzNDX 如果将其中一个红色矩形拖到一边，您会看到出现一个滚动条并开始滚动
您需要为您的可拖动项目添加一个容器，例如 jsfiddle.net/SJcxX/5
我不这么认为。我为您简化了更多示例jsfiddle.net/SJcxX/13。请注意可拖动元素的 Jquery 代码（包含，更重要的是滚动）：$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });

【解决方案2】：

只需在您为其设置滚动条的父 div 上添加 css 属性“作为静态位置”。

$("selector").css("position","static");

例如

$('.bottomSentences').draggable({
    cursor: 'move',
    helper: 'clone',
        start: function(e, ui)
        {
            $(ui.helper).addClass("ui-draggable-helper");
            $("#splitSentencesDiv").css("position","static");

        }       
});

这里在前。 splitSentencesDiv 是我为其设置滚动的 Div。默认情况下，它的位置值是由 bootstrap colclass 相对设置的。

【讨论】：