拖动对象时无法向左/向上滚动，仅向右/向下滚动

Question

我有一些div，我正在用jQuery-ui拖延。我有一个小的500x500区域，这应该是可能的。当我向屏幕右侧拖动时，x = 1000，页面将向右滚动。如果我拖到屏幕底部，y = 750，页面将滚动。如果我将屏幕拖到顶部/左侧（-1000 / -750），则不会发生这种情况。该页面将仅展开/滚动到右侧/底部。页面是否可以向上/向左展开，而不仅仅是向下/向右？

<div class="container">

      <div class="mainArea">
        <div class="object1Container">
          <div class="object1"></div>
          <div class="object1"></div>
        </div>
      </div>

      <div class="footer">
        <button> don't go past this</button>
      </div>

</div>

.object1{
  height:25px;
  width:100px;
  border: 1px solid black;
  background-color:red;
}

.mainArea{
  position:relative;
  background:green;
  height:100%;
  overflow:scroll;
}
.footer{
  position:absolute;
  bottom:0;
  left:0;
}
.container{
  height:500px;
  width:500px;
  position:relative;
}

CellFormatting