JavaScript Zoom in on DIV center, without changing its size

Question

I am writing a client side JavaScript web app. I only use plain JavaScript, no libraries. I have a DIV which is the workspace. I have made it so that if you drag with the middle mouse button, everything in the workspace moves, to mimic moving the viewport itself. I really want to have it zoom when I scroll my mouse wheel. I use the CSS transform: scale() property for that. The problem with that is that it changes the size of the workspace itself, which I don't want, so I made it change the width and height of the workspace on zoom to keep it the same size. That would work great if I wanted to zoom from the top left corner, but I want it to zoom from the center. I tried to change the transform-origin to center but now when I zoom in, the workspace moves to the top right corner and when I zoom out, the workspace moves to the top-left corner. What I think is happening, is that the workspace changes its size from the center but it still resizes from the top left corner. What can I do?

Edit: code I use for changing the scale:

container.onwheel = function(e) { //Disabled until answer to the zoom question on stackoverflow is given...
    e.preventDefault();

    let oldzoom = zoom_factor;
    if (zoom_factor >= 0) {
        var zoomedinby = zoom_factor*-6/e.deltaY;
        zoom_factor += zoomedinby;
    }
    //Zoom in/out
    container.style["transform-origin"] = "50% 50%"
    container.style.transform = `scale(${zoom_factor})`;
    console.log(container.style.transform);

    container.style.width = `${100/zoom_factor}%`;
    container.style.height = `${100/zoom_factor}%`;
}

.container {
    width: 100%;
    height: 100%;
    background-color: #00000000; /*Dark theme :D*/
    overflow: hidden; /*For srcolling behavior*/

    z-index: 0; /* Stay on bottom, used to make it work in combination with modals I have.*/

    transform: translate(0%, 0%);
    transform-origin: center center;
}

I have a working version of the web app (for now without the zooming behaviour) online on https://thijmer.nl/logics/

Answer 1

Here's a simplified example of zooming in on an element without it overflowing.

Click on the target to zoom in on it, click again to zoom out.

Sorry I don't have a mouse plus wheel to integrate it with your code. The basic idea is to have the zoomable element within a outer one, the outer one having overflow hidden.

 .outer { position: relative; top: 20%; left: 30%; width: 50vw; height: 50vh; overflow:hidden; border-style: solid 1px; }.container { width: 100%; height: 100%; transform: scale(1); transform-origin: 50% 50%; transition: all 2s; background-image: radial-gradient(circle, black 0%, black 20%, magenta 20%, magenta 40%, cyan 40%, cyan 100%); }.expand { transform: scale(1.5); }

 <div class="outer"> <div class="container" onclick="this.classList.toggle('expand');"></div> </div>