有两个容器：第一个是小视口，第二个是巨大的工作区。因此，用户滚动视口以在工作区中移动。我想通过 CSS 属性实现放大/缩小功能tranform，但是在这个过程中我遇到了一个难题，并没有找到精确的解决方案。
问题是：当用户放大/缩小时，工作区中的元素会发生移动。实际上发生这种情况是因为工作区大小被调整，而不是它们。但是，如果我调整工作区中每个元素的大小，它们之间的距离（就top/leftCSS 值）将被更改，这不是首选。
我看到以下解决方案：调整大小后更改滚动值，但我不知道要使用什么比率或数字。有没有任何公式或其他解决方案可以克服这样的问题？
用于调整大小使用Alt + MouseWheel
let workspace = document.getElementsByClassName('workspace')[0];
workspace.onwheel = resize;
let current_scale = 1;
function resize(E) {
E = E || window.event
if (E.altKey) {
E.preventDefault();
let new_scale = Math.max(0.1, current_scale - E.deltaY / 360);
workspace.style.setProperty('transform', 'scale(' + new_scale + ')');
current_scale = new_scale;
}
}.viewport {
width: 80vw;
height: 80vh;
box-sizing: border-box;
overflow: scroll;
transform: scale(1);
}
.workspace {
position: relative;
width: 1000px;
height: 1000px;
overflow: hidden;
}
.element {
position: absolute;
width: 10px;
height: 10px;
}<div class="viewport">
<div class="workspace">
<button class="element" style="top: 100px; left: 150px"></button>
<button class="element" style="top 80px; left: 100px"></button>
<button class="element" style="top: 230px; left: 130px"></button>
<button class="element" style="top: 100px; left: 250px"></button>
</div>
</div>UPD：我附上了原始项目的一些照片以供澄清：
So, that's a look of the workspace with scale(1)
Then I resize it and get the following result:
But desirable result looks like this:
UPD2我插入了<svg>元素来显示如何绘制线条以及为什么调整每个按钮的大小对我来说在我的情况下似乎不是可行的解决方案
let workspace = document.getElementsByClassName('workspace')[0];
workspace.onwheel = resize;
let current_scale = 1;
function resize(E) {
E = E || window.event;
if (E.altKey) {
E.preventDefault();
let new_scale = Math.max(0.1, current_scale - E.deltaY / 360);
var btns = workspace.getElementsByClassName('element');
for(var i = 0; i <btns.length; i++) {
btns[i].style.setProperty('transform', 'scale(' + new_scale + ')');
}
current_scale = new_scale;
}
}.viewport {
width: 80vw;
height: 80vh;
box-sizing: border-box;
overflow: scroll;
transform: scale(1);
transform-origin: 0 0;
}
.workspace {
position: relative;
width: 1000px;
height: 1000px;
overflow: hidden;
}
.element {
position: absolute;
width: 10px;
height: 10px;
}
.line-drawer
{
position:absolute;
height:1000px;
width:1000px;
}<div class="viewport">
<div class="workspace">
<svg class="line-drawer">
<line x1="100px" x2="130px" y1="80px" y2="230px" style='stroke-width: 4px; stroke: black'></line>
</svg>
<button class="element" style="top: 100px; left: 150px"></button>
<button class="element" style="top: 80px; left: 100px"></button>
<button class="element" style="top: 230px; left: 130px"></button>
<button class="element" style="top: 100px; left: 250px"></button>
</div>
</div>像这样缩放各个元素将使它们保持在原来的位置
let workspace = document.getElementsByClassName('workspace')[0];
workspace.onwheel = resize;
let current_scale = 1;
function resize(E) {
E = E || window.event
if (E.altKey) {
E.preventDefault();
let new_scale = Math.max(0.1, current_scale - E.deltaY / 360);
var btns = workspace.getElementsByClassName('element');
for(var i = 0; i <btns.length; i++) {
btns[i].style.setProperty('transform', 'scale(' + new_scale + ')');
}
current_scale = new_scale;
}
}.viewport {
width: 80vw;
height: 80vh;
box-sizing: border-box;
overflow: scroll;
transform: scale(1);
}
.workspace {
position: relative;
width: 1000px;
height: 1000px;
overflow: hidden;
}
.element {
position: absolute;
width: 10px;
height: 10px;
}<div class="viewport">
<div class="workspace">
<button class="element" style="top: 100px; left: 150px"></button>
<button class="element" style="top 80px; left: 100px"></button>
<button class="element" style="top: 230px; left: 130px"></button>
<button class="element" style="top: 100px; left: 250px"></button>
</div>
</div>