如何动态缩放 HTML 元素而不影响其父元素？

Question

I have an HTML page where a draggable and zommable grid is rendered.我有一个 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>

Relevant CSS:相关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>

Table's cells are dynamically rendered as square tiles with css class .tile .表格的单元格动态呈现为具有 css 类.tile方形图块。 If the grid total size exceeds the grid_container_static space, the exceeding portion is hidden behind the parents without affecting them.如果网格总大小超过 grid_container_static 空间，则超出部分隐藏在父项后面而不影响它们。 The user can drag the grid to see the hidden portions.用户可以拖动网格来查看隐藏的部分。 So far, everything works.到目前为止，一切正常。

I wrote a javascript zoom function that dynamically changes the grid tiles size when the mouse scroll is detected:我编写了一个 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>

This script works but in this case, when the tile size is changed, the parents are affected and their height changes.此脚本有效，但在这种情况下，当 tile 大小更改时，父项会受到影响并且它们的高度也会发生变化。 I want the zoom function to only impact the grid, causing the exceeding portions to be hidden behind the parents as explained before.我希望缩放功能只影响网格，导致超出部分隐藏在父母后面，如前所述。 How can I achieve this?我怎样才能做到这一点？

Answer 1

You could hide overflow in the table if needed and use transform: scale .如果需要，您可以在表中隐藏溢出并使用transform: scale 。 Because CSS Transform does not affect document flow.因为 CSS Transform 不影响文档流。 The DOM element will occupy it's original position and dimensions within the page flow. 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