JavaScript 放大 DIV 中心，而不改变其大小

Question

我正在编写一个客户端 JavaScript Web 应用程序。我只使用纯 JavaScript，没有库。我有一个 DIV，它是工作区。我已经做到了，如果你用鼠标中键拖动，工作区中的所有东西都会移动，以模拟视口本身的移动。当我滚动鼠标滚轮时，我真的想让它缩放。为此，我使用 CSS transform: 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;
}

我在https://thijmer.nl/logics/上有一个在线的网络应用程序（暂时没有缩放行为）的工作版本

Answer 1

这是一个放大元素而不溢出的简化示例。

点击目标放大，再次点击缩小。

抱歉，我没有鼠标和滚轮来将其与您的代码集成。基本思想是将可缩放元素放在外部元素中，外部元素隐藏溢出。

.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>