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

Posted 2023-05-08

【中文标题】Javascript（jQuery）在拖动项目时禁用页面滚动

【英文标题】：Javascript (jQuery) disable page scroll when dragging items

【发布时间】：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 的滚动？

【参考方案1】：

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

【讨论】：

这不起作用；当用户将小部件拖动到屏幕边缘时，“”仍然会滚动

你能提供一个jsfiddle吗？这就是这个css应该如何工作w3schools.com/cs-s-ref/…

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 相对设置的。