html - 使用 Overflow-y :scroll 将 child 拖出容器

Question

我有一个容器，里面有一个列表。可以拖动列表项，用鼠标移动。

容器可滚动:

overflow-y: scroll;

通过设置此属性，Chrome 会自动将 overflow-x 属性设置为“auto”。如果我设置 overflow-x: visible 它会被 Chrome 忽略。如果我设置 overflow-x: hidden 那么显然该元素被裁剪了。

当我将列表项拖到容器的左边缘或上边缘之外时，它会被裁剪到容器的边缘。如果我将它拖出右侧或底部边缘，容器会滚动以容纳它。我希望该元素能够在不被裁剪且不触发滚动的情况下拖出容器。

鉴于必须将容器设置为 overflow-y: scroll 并且这反过来会强制 Chrome 设置 overflow-x: auto，我有什么办法吗？可以实现还是不可能？

代码笔:http://codepen.io/Pedr/pen/azLWeY

注意:我知道我可以通过使用填充来抵消容器来解决这个问题(这样容器的限制实际上超出了它的视觉边缘)，但在我的情况下这不是一个选项.

$(function() {
  $('.Wrapper').mousemove(function(event){
    $('.Item').offset({left: event.pageX, top: event.pageY});
  });
})

html,
body {
  height: 100%;
}

.Wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

.Container {
  background: grey;
  position: absolute;
  width: 50%;
  left: 25%;
  min-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden; // Clips Item
  // If left at auto it will clip the item on the top and left edge and scroll if the item overlaps the bottom or right edge.
}

.Item {
  padding: 20px;
  background: red;
  position: absolute;
  width: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
  <div class="Container">
    <div class="Item">ITEM</div>
  </div>
</div>

Answer 1

将 ITEM 设置为固定位置....使其远离其他所有内容

It Works like this

$(function() {
  $('.Wrapper').mousemove(function(event){
      $('.Item').css('position', 'fixed');
      $('.Item').offset({left: event.pageX, top: event.pageY});
    });
})

Look on the snippet here:

$(function() {
  $('.Wrapper').mousemove(function(event){
      $('.Item').css('position', 'fixed');
      $('.Item').offset({left: event.pageX, top: event.pageY});
    });
})

.Wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
}

.Container {
  background: grey;
  position: absolute;
  width: 50%;
  left: 25%;
  min-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden; // Clips Item
  // If left at auto it will clip the item on the top and left edge and scroll if the item overlaps the bottom or right edge.
}

.Item {
  padding: 20px;
  background: red;
  position: absolute;
  width: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
  <div class="Container">
    <div class="Item">ITEM</div>
  </div>
</div>