我们有一个增加/减少内容缩放级别的功能。当用户增加缩放比例时，我们会增加 css 属性 transform 的比例。当内容被放大时，父 div 甚至不需要显示滚动条。
请检查下面的代码和 fiddle :
HTML:
<div id="viewport">
<div id="zoomDiv">
<p style="width:250px;height:150px;background-color:yellow">
hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j fs fsd fsdf hsjd hs jdfhsdf hsf j f
</p>
</div>
</div>
<a href="javascript:void(0)" onclick="transformDiv(0.1)" id="increase"> + </a>
<a href="javascript:void(0)" onclick="transformDiv(-0.1)" id="deccrease"> - </a>
<script>
var d = 1;
function transformDiv(n) {
d = d + n;
document.getElementById("zoomDiv").style.transform = "scale("+d+")";
}
</script>
CSS:
#viewport{width:300px;height:200px;border:1px solid #000;background-color:#FFF;overflow:auto}
#zoomDiv{transform}
fiddle :https://jsfiddle.net/hyvr7bwn/
问题出现在所有浏览器中。
最佳答案
我已经更新了你的fiddle , 原来它需要以下 CSS 代码才能正确对齐。这只是在放大时将内容保持在左侧，这样就不会浪费空间，并且在不需要时不会显示滚动条。
-webkit-transform-origin: top left;
float:left;
关于html - css transform 在不需要时显示滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35194823/