css转换在不需要时显示滚动条

Question

我们有一个增加/减少内容缩放级别的功能。当用户增加缩放时，我们正在增加css属性transform的比例。当内容放大时，父div显示滚动条甚至不需要。

请检查以下代码和提示：

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">&nbsp;+&nbsp;</a>
<a href="javascript:void(0)" onclick="transformDiv(-0.1)" id="deccrease">&nbsp;-&nbsp;</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}

小提琴：https://jsfiddle.net/hyvr7bwn/

所有浏览器都出现问题。

Answer 1

我已更新了您的fiddle，但事实证明它需要以下CSS代码才能正确对齐。这只是在放大时将内容保持在左侧，这样就不会浪费空间，并且在不需要时不会显示滚动。

{{1}}