Dragging A Child Out Of A Container With Overflow-y:scroll

Question

I have a container with a list inside. The list items can be dragged, moving with the mouse.

The container is scrollable with:

overflow-y: scroll;

By setting this property, Chrome automatically sets the overflow-x property to 'auto'. If I set overflow-x: visible it is ignored by Chrome. If I set overflow-x: hidden then obviously the item is cropped.

When I drag a list item outside of the left or top edge of the container, it is cropped to the edges of the container. If I drag it out of the right or bottom edges the container scrolls to accommodate it. I would like the item to be able to dragged outside of the container without it being cropped and without it triggering scroll.

Given that the container must be set to overflow-y: scroll and that this in turn forces Chrome to set overflow-x: auto, is there any way I can achieve this or is it impossible?

Codepen: http://codepen.io/Pedr/pen/azLWeY

Note: I know I can hack this by using padding to offset the container (so that the limits of the container actually end beyond its visual edges), but that is not an option in my situation.

$(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

Set the ITEM to position fixed.... to move it away from everything else

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>

Answer 2

Here is my edit: http://codepen.io/anon/pen/MYrxGJ

What I did is, set the Wrapper's position to relative, remove the Container's position CSS, and set it to margin-left: 25%; margin-right: 25%; (same effect as margin: 0px auto;). This way, the absolute positioning of the Item div is relative to the Wrapper div, instead of the Container div.