防止浏览器被强制滚动

Question

我有一个问题，我正在处理页面中的可拖动元素，整个父元素都有overflow: hidden并且工作正常，但是，如果我强制页面滚动将元素拖到外面，将会发生不必要的滚动。您可以在下面的fiddle中看到它的效果，将灰色框向右拖动...

Fiddle: http://jsfiddle.net/a6vzhk2z/

编辑：预期元素的一半可以超出页面。

- Caio Kawasaki

Answer 1

你是指这个吗？

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

演示

编辑：也许这样会更好：

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

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

- marcel

---

我已经考虑过了，但是预计有一半的元素可能会超出页面。 - Caio Kawasaki

我认为没有办法防止这种情况发生，因为它不会触发事件。 - marcel

Answer 2

当您将框拖到最右边时，它会使屏幕尺寸略微超出滚动条，是这样吗？

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

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

- Bill Pope

---

我说了同样的话，他已经写道：“预计有一半的元素可能会超出页面”。 - marcel

Answer 3

我发现了解决方案，我的解决方案是将位置设置为父元素。

这是我新的 SCSS 代码，用于 #container:

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

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

这里有一个 JSFiddle：http://jsfiddle.net/o8Lrpzb2/1/

- Caio Kawasaki