How to dynamically zoom a HTML element without affecting its parents?
Question
I have an HTML page where a draggable and zommable grid is rendered.
</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:
<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 . If the grid total size exceeds the grid_container_static space, the exceeding portion is hidden behind the parents without affecting them. 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:
<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. 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?
1 answers
solution1
2 ACCPTED 2021-07-28 09:40:41
You could hide overflow in the table if needed and use transform: scale . Because CSS Transform does not affect document flow. The DOM element will occupy it's original position and dimensions within the page flow.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.