在 body-top/left 视口外查看绝对定位元素的滚动条

Question

我想在可以位于左侧和顶部视口之外的元素上显示滚动条，而不是让它们消失。

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

这将超出 body 视口：

示例： http://jsfiddle.net/atnc3/28/

如果可能，只使用 css。

Answer 1

我认为您可以使用 javascript 来实现。

Is this what you are looking for?

使用

window.scrollTo(10, 50);

Answer 2

传统方法不可能。

只有 javascript 移动正文元素才有可能，初步尝试使用 html5 拖放：

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">

像这样：

codepen

在 body-top/left 视口外查看绝对定位元素的滚动条

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

html

css

document-body