如何在视口平移时使div扩展？

Question

我有一个<div>作为一个孩子的视口<div>，其中孩子<div>通过点击并拖动鼠标周围，但我想孩子<div>填充视口，以便孩子的边缘<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 
 
    }); 
 
    }; 
 
});

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); 
 
}

<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>每当视靠拢给力？

UPDATE：要澄清我的问题，我希望孩子<div>保持未动，所以对于用户来说，孩子div应该觉得他们环顾泛的无限平面。我不希望它像fixed元素一样行事。

Answer 1

我最终通过创建具有相同的网格背景的独立元件解决了这个问题，但背景平底锅与孩子<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>

Answer 2

尝试改变DIV的宽度/高度与它的位置沿

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