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

Question

我们具有 increasing/decreasing 内容缩放级别的功能。当用户增加缩放时，我们正在增加 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">&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}

Fiddle:https://jsfiddle.net/hyvr7bwn/

所有浏览器都会出现问题。

Answer 1

我已经更新了您的 fiddle，结果发现它需要以下 CSS 代码才能正确对齐。这只是在放大时将内容保持在左侧，这样就不会浪费 space 并且在不需要时不会显示滚动条。

-webkit-transform-origin: top left; 
float:left;

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

css transform displays scrollbar when not needed

html

css

transform

zooming

css-transforms