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

【问题标题】：css transform displays scrollbar when not neededcss 转换在不需要时显示滚动条
【发布时间】：2016-02-04 07:19:40
【问题描述】：

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

所有浏览器都出现问题。

【问题讨论】：

标签： html css zooming transform css-transforms

【解决方案1】：

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

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

【讨论】：