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/上有一個 web 應用程序的工作版本（目前沒有縮放行為）

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>