Resizing And Scrolling Issue (js/html)

There are two containers: the first is a small viewport and the second is huge workspace. So, user scroll the viewport to move within the workspace. I want to implement a zoom in/o

Solution 1:

Scaling the individual elements like this will keep them in there position

let workspace = document.getElementsByClassName('workspace')[0];
workspace.onwheel = resize;

let current_scale = 1;

functionresize(E) {
  E = E || window.eventif (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;
}

<divclass="viewport"><divclass="workspace"><buttonclass="element"style="top: 100px; left: 150px"></button><buttonclass="element"style="top 80px; left: 100px"></button><buttonclass="element"style="top: 230px; left: 130px"></button><buttonclass="element"style="top: 100px; left: 250px"></button></div></div>