如何使用CSS和 JavaScript实现无限可拖拽的背景

人工智能 2026-07-07

我正在做一个网站，用户可以在上面绘制流程图，因此为他们创建了一个工作区，但我希望如果用户抓取并移动工作区时，出现更多空白区域，看起来像是无限扩展，同时又不会破坏用户先前的工作。我在如何让它可移动的问题上卡住了。

到目前为止，我已经做了这么多，但没有任何效果。

let workspace = document.getElementById('workspace');
workspace.addEventListener('mousedown' , (e)=>{
    workspace.style.cursor="grab";
    let posx=e.clientX;
    let posy=e.clientY;
    let wposx=workspace.offsetTop;
    let wposy=workspace.offsetLeft;
    workspace.addEventListener('mousemove' , (e)=>{
        workspace.style.backgroundPositionX=wposx+(e.clientX-posx);
        workspace.style.backgroundPositionY=wposy+(e.clientY-posy);
    })
})
workspace.addEventListener('mouseup' , (e)=>{
    workspace.style.cursor="default";
})

#workspace{
    border: 2px solid black;
    height: 107vh;
    width: 100%;
    background-color: black;
    background-image: url(workspace-bg.jpg);
}

<div id="workspace"></div>

解决方案

你需要研究CSS3的 Flexbox。我这里有一个较长的代码示例供你参考。

这是以下内容作为实现它的核心驱动。你还可以再添加更多CSS的内容，使其更符合你的需求。

workspace {                
  width: 480px; // 你想要的任意宽度
  height: 320px; // 你想要的任意高度
  overflow: auto;          
}

.flex-content {            
  display: flex;
  flex-direction: column;
  min-width: 100%;
  width: max-content;
}

.flex-row {
  display: flex;
}

.item {
  flex: 1 0 140px;
}

我有完整的HTML来演示这个，但我把它交给一个大语言模型处理，结果并没有格式化，在这个站点上也是不允许的。所以我仅放入了一些手写的样板，来展示如何使用它。Flexbox有 grow、shrink和 basis的概念。你可以在这里更深入地了解：https://www.w3schools.com/css/css3_flexbox.asp。希望这能帮助到你。

把类名按如下方式应用，或大致如此。

<div id="workspace" class="flex-content flex-row item">
    <div class="flex-content">
        <div class="flex-row">
            <div class="item">1</div>
            <!-- 等等 -->
        </div>
        <!-- 更多行 ... -->
    </div>
</div>

JavaScript