[英]How to dynamically zoom a HTML element without affecting its parents?
我有一个 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 大小更改时,父项会受到影响并且它们的高度也会发生变化。 我希望缩放功能只影响网格,导致超出部分隐藏在父母后面,如前所述。 我怎样才能做到这一点?
如果需要,您可以在表中隐藏溢出并使用transform: scale
。 因为 CSS Transform 不影响文档流。 DOM 元素将占据它在页面流中的原始位置和尺寸。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.