Question

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

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

这将在身体视口外：

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

如果可能，只能使用css。

Answer 1

我认为你可以通过使用javascript实现这一目标。

Is this what you are looking for?

使用

window.scrollTo(10, 50);

Answer 2

传统方法无法实现。

可能只有javascript移动body元素，使用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 viewport

2 个答案: