ビューポートがパンを動かすように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要素の幅/高さを変更してみてください、私は最終的に同じグリッドの背景を持っている別の要素を作成することで、この問題を解決しますが、子供<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

は、その位置

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