Question

我有<div>作为孩子<div>的视口，其中孩子<div>通过点击并拖动鼠标来平移，但是我想要孩子{ {1}}填充视口，以便永远不会看到子<div>的边缘。例如：

＆＃13;

<div>

＆＃13;

var isDragging = false;
var lastMouseX;
var lastMouseY;

$("#viewport").mousedown(function(ev) {
  if (ev.which == 1) {
    isDragging = true;
  }
});

$("html").mouseup(function(ev) {
  if (ev.which == 1) {
    isDragging = false;
  }
});

$("#viewport").mousemove(function(e) {
  var deltaX = lastMouseX - e.clientX;
  var deltaY = lastMouseY - e.clientY;

  lastMouseX = e.clientX;
  lastMouseY = e.clientY;

  if (isDragging) {
    $("#view").css({
      left: "-=" + deltaX,
      top: "-=" + deltaY
    });
  };
});

＆＃13;

body {
  background-color: grey;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#viewport {
  display: block;
  background-color: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#view {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 24px 24px;
  background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px);
}

＆＃13;

有没有办法让它成为无尽的＃34;，每当视口靠近边缘时，不断向孩子<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="viewport"> <div id="view"></div> </div>添加一块？

更新为了澄清我的问题，我希望孩子<div>保持不动，因此对于用户来说，孩子<div>应该感觉像是一个无限的飞机他们看起来很平静。我不希望它像div元素那样行事。

Answer 1

尝试更改div的宽度/高度及其位置

if (isDragging) {
  $("#view").css({
    left: "-=" + deltaX,
    top: "-=" + deltaY,
    width: "+=" + deltaX,
    height: "+=" + deltaY
});

Answer 2

我最终通过创建一个具有相同网格背景的单独元素解决了这个问题，但背景平移了孩子<div>。片段：

var isDragging = false;
var lastMouseX;
var lastMouseY;

$("#viewport").mousedown(function(ev) {
  if (ev.which == 1) {
    isDragging = true;
  }
});

$("html").mouseup(function(ev) {
  if (ev.which == 1) {
    isDragging = false;
  }
});

$("#viewport").mousemove(function(e) {
  var deltaX = lastMouseX - e.clientX;
  var deltaY = lastMouseY - e.clientY;

  lastMouseX = e.clientX;
  lastMouseY = e.clientY;

  if (isDragging) {
    $("#view").css({
      left: "-=" + deltaX,
      top: "-=" + deltaY
    });
    $("#grid").css({
      'background-position-x': "-=" + deltaX,
      'background-position-y': "-=" + deltaY,
    });
  };
});

body {
  background-color: grey;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#viewport {
  display: block;
  background-color: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#view {
  position: relative;
  width: 100%;
  height: 100%;
}

#grid {
  position: fixed;
  width: 100%;
  height: 100%;
  background-size: 24px 24px;
  background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="viewport">
  <div id="grid"></div>
  <div id="view"></div>
</div>

当视口平移时，我怎样才能使div扩展？

2 个答案: