Проблема с изменением размера и прокруткой (JS / HTML)

Question

Есть два контейнера: первый - это небольшое окно просмотра, а второй - огромное рабочее пространство. Итак, пользователь прокручивает область просмотра, чтобы перемещаться в рабочей области. Я хочу реализовать функцию увеличения / уменьшения масштаба через свойство CSS tranform, но во время процесса я столкнулся с одной трудностью и не смог найти для нее точного решения.

Проблема: когда пользователь увеличивает масштаб in / out, элементы в рабочем пространстве смещаются. На самом деле это происходит потому, что изменяется размер рабочего пространства, а не они. Но если я изменю размер каждого элемента в рабочей области, расстояния между ними (в терминах top/left CSS значений) будут изменены, что нежелательно.

Я вижу следующее решение: изменить значения прокрутки после изменения размера, но я не знаю, какую крысу ios или числа использовать. Есть ли какие-либо формулы или другое решение для преодоления такой проблемы?

Для изменения размера используйте 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 : Я приложил несколько фотографий из исходного проекта для уточнения:

Итак, это рабочая область с scale(1)

Затем я изменяю его размер и получаю следующий результат:

Но желаемый результат выглядит так:

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>

Answer 1

При таком масштабировании отдельных элементов они останутся на своем месте

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>