如何在視口平移時使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 
});