如何動態縮放 HTML 元素而不影響其父元素？

Question

我有一個 HTML 頁面，其中呈現了可拖動和可縮放的網格。

</head>

<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="main">   

    <div id="top_div">          
    <!-- some GUI -->
    </div>
    <div id="central_container">
        <div id="grid_container_static">
            <div id="grid_container_movable">
                <table id="grid">
                </table>
            </div>
        </div>
    </div>

    <div id="bottom_div">
    <!-- some GUI -->
    </div>
</div>

<script>
$( function() {
        $("#grid_container_movable").draggable();
    });
</script>

相關CSS：

<style>
body, html{
    margin: 0px;
    display: flex;
    flex-direction: column;
}

* {
   box-sizing:border-box;
}

body{
    height: 100%;
}

#header{
    background-color: green;
    flex-grow: 1;
}
#central_container{
    background-color: red;

    min-height: 60%;
    max-height: 60%;
}
#grid_container_static{
    overflow: hidden;      
}
</style>

表格的單元格動態呈現為具有 css 類.tile方形圖塊。 如果網格總大小超過 grid_container_static 空間，則超出部分隱藏在父項后面而不影響它們。 用戶可以拖動網格來查看隱藏的部分。 到目前為止，一切正常。

我編寫了一個 javascript 縮放函數，它在檢測到鼠標滾動時動態更改網格圖塊大小：

<script>
window.addEventListener("wheel", event => {
        const delta = Math.sign(event.deltaY);     
        
        if(delta < 0){
            current_tile_size ++;
        }else{
            if(current_tile_size > 1){
                current_tile_size --;
            }
            
        }
        var tiles = document.getElementsByClassName('tile');
    
    
        for(var i = 0; i < tiles.length; i++){
            tiles[i].style.width = current_tile_size+"em";
            tiles[i].style.height = current_tile_size+"em";
        }
    });
 </script>

此腳本有效，但在這種情況下，當 tile 大小更改時，父項會受到影響並且它們的高度也會發生變化。 我希望縮放功能只影響網格，導致超出部分隱藏在父母后面，如前所述。 我怎樣才能做到這一點？

Answer 1

如果需要，您可以在表中隱藏溢出並使用transform: scale 。 因為 CSS Transform 不影響文檔流。 DOM 元素將占據它在頁面流中的原始位置和尺寸。

如何動態縮放 HTML 元素而不影響其父元素？

問題描述

1 個解決方案

解決方案1
2 已采納 2021-07-28 09:40:41

如何動態縮放 HTML 元素而不影響其父元素？

問題描述

1 個解決方案

解決方案1 2 已采納 2021-07-28 09:40:41

解決方案1
2 已采納 2021-07-28 09:40:41