阻止浏览器强制滚动

Question

我有一个问题，我在我的页面中使用可拖动元素，整个父元素都有overflow: hidden并且它工作正常，但是，如果我强制页面滚动拖动元素外，不需要的滚动会发生的。你可以在小提琴下面看到它在行动中将灰色框拖到右边......

小提琴：http://jsfiddle.net/a6vzhk2z/

编辑：预计该元素的一半可以超出页面

Answer 1

你是说这个意思吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="extra-weight" class="menu">
<div class="menu-item">Item 1</div>
<div class="menu-item">Item 2</div>
<div class="menu-item">Item 3</div>
</div>

<button onclick="addExtraWeight()">Add extra weight</button>
<button onclick="removeExtraWeight()">Remove extra weight</button>

Demo

编辑：也许这会更好：

$(".draggable-box").draggable({
    containment: [-100,100,windowWidth - 200,100]
});

编辑＃2：问题不在于问题。鼠标是问题所在。只有当鼠标移动到窗口外时才会发生这种情况。防止鼠标离开窗口应该可以解决问题。

Answer 2

所以当你将盒子一直向右拖动时，它会使屏幕尺寸略微超出scoll bar，对吗？

这可能不是你想要的，但是当我从windowWidth中减去额外的100时，它似乎解决了问题：

$(".draggable-box").draggable({
    containment: [-100,100,windowWidth-200,100]
}); 

Answer 3

我找到了解决方案，我的解决方案是父元素的位置。

这是#container的新SCSS：

#container{
  position: relative;
  height: calc(100% - 50px);
  overflow: hidden;

  #text{
    @include full-height();
    overflow-y: auto;
    overflow-x: hidden;
  }
}

这是一个小提琴：http://jsfiddle.net/o8Lrpzb2/1/