view scrollbar for absolute positioned element outside body-top/left viewport

Question

I want to show scrollbar even on an element that can be positioned outside of the left and top viewport, instead of making them disappear.

.abs-position {
  position:absolute;
  left: -50px;
  top:-10px;
}

This will go outside body viewport:

example: http://jsfiddle.net/atnc3/28/

if possible only with css.

Answer 1

Not possible with traditional methods.

Possible only with javascript moving the body element, a rudimental try using html5 drag and drop:

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  if($("img").offset().top<0)
    $("body").css("top",-$("img").offset().top);
  if($("img").offset().left<0)
    $("body").css("left",-$("img").offset().left);
}

---

body {
 position: absolute;
}
#div1 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
#div1 img {
  position: absolute;
  left:-50px;
}

---

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="https://play.google.com/books/publish/static/images/google-search.png" draggable="true" ondragstart="drag(event)" width="100" height="100">

something like this:

codepen