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

我有一个

作为子

的视口，其中子

通过单击并拖动鼠标来平移，但是我希望子

填充视口，以便子

的边缘永远不可见。例如：

var isDragging=false；
var lastMouseX；
var lastMouseY；
$（“#视口”）.mousedown（函数（ev）{
如果（ev.which==1）{
IsDraging=true；
}
});
$（“html”）.mouseup（函数（ev）{
如果（ev.which==1）{
IsDraging=错误；
}
});
$（“#视口”）.mousemove（函数（e）{
var deltaX=lastMouseX-e.clientX；
var deltaY=lastMouseY-e.clientY；
lastMouseX=e.clientX；
lastMouseY=e.clientY；
if（ISDRAGING）{
$（“#视图”）.css({
左：“-=”+deltaX，
顶部：“-=”+三角洲
});
};
});
正文{
背景颜色：灰色；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
#视区{
显示：块；
背景色：透明；
宽度：100%；
身高：100%；
溢出：隐藏；
}
#看法{
位置：相对位置；
宽度：100%；
身高：100%；
背景尺寸：24px 24px；
背景图像：线性渐变（向右，白色1px，透明1px），线性渐变（向下，白色1px，透明1px）；
}
尝试更改div的宽度/高度及其位置

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

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

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

我最终解决了这个问题，创建了一个单独的元素，该元素具有相同的网格背景，但背景与子元素
一起平移。片段：


var isDragging=false；
var lastMouseX；
var lastMouseY；
$（“#视口”）.mousedown（函数（ev）{
如果（ev.which==1）{
IsDraging=true；
}
});
$（“html”）.mouseup（函数（ev）{
如果（ev.which==1）{
IsDraging=错误；
}
});
$（“#视口”）.mousemove（函数（e）{
var deltaX=lastMouseX-e.clientX；
var deltaY=lastMouseY-e.clientY；
lastMouseX=e.clientX；
lastMouseY=e.clientY；
if（ISDRAGING）{
$（“#视图”）.css({
左：“-=”+deltaX，
顶部：“-=”+三角洲
});
$（“#网格”）.css({
'背景位置-x'：“-=”+deltaX，
'背景位置-y'：“-=”+deltaY，
});
};
});
正文{
背景颜色：灰色；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
#视区{
显示：块；
背景色：透明；
宽度：100%；
身高：100%；
溢出：隐藏；
}
#看法{
位置：相对位置；
宽度：100%；
身高：100%；
}
#网格{
位置：固定；
宽度：100%；
身高：100%；
背景尺寸：24px 24px；
背景图像：线性渐变（向右，白色1px，透明1px），线性渐变（向下，白色1px，透明1px）；
}
我最终解决了这个问题，创建了一个单独的元素，该元素具有相同的网格背景，但背景与子元素齐平。片段：


var isDragging=false；
var lastMouseX；
var lastMouseY；
$（“#视口”）.mousedown（函数（ev）{
如果（ev.which==1）{
IsDraging=true；
}
});
$（“html”）.mouseup（函数（ev）{
如果（ev.which==1）{
IsDraging=错误；
}
});
$（“#视口”）.mousemove（函数（e）{
var deltaX=lastMouseX-e.clientX；
var deltaY=lastMouseY-e.clientY；
lastMouseX=e.clientX；
lastMouseY=e.clientY；
if（ISDRAGING）{
$（“#视图”）.css({
左：“-=”+deltaX，
顶部：“-=”+三角洲
});
$（“#网格”）.css({
'背景位置-x'：“-=”+deltaX，
'背景位置-y'：“-=”+deltaY，
});
};
});
正文{
背景颜色：灰色；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
#视区{
显示：块；
背景色：透明；
宽度：100%；
身高：100%；
溢出：隐藏；
}
#看法{
位置：相对位置；
宽度：100%；
身高：100%；
}
#网格{
位置：固定；
宽度：100%；
身高：100%；
背景尺寸：24px 24px；
背景图像：线性渐变（向右，白色1px，透明1px），线性渐变（向下，白色1px，透明1px）；
}

我不希望它像一个跟随拖动的
固定的
元素那样工作。请查看更新后的问题。@alano您希望子div后面连续出现完全相似的子div。我不希望它像拖动后的
fixed
元素那样运行。请查看更新后的问题。@Alano您希望child div后面继续有完全相同的child div。