获取CSS缩放变换以更改垂直滚动条？

Question

我正在尝试使用CSS缩放变换放大或缩小元素。我可以正确扩展。但是，只有水平滚动条受变换的影响。垂直滚动条不是。

我知道CSS转换不应该影响元素大小。显然，它们会影响元素大小和布局 - 但只是水平。

这是一个演示这个的例子：

.wrapper {
  background: orange;
}

p {
  font-size: 50em;
  margin: 0px;
  transform: scale(1.0);  /* Change to scale(0.2) to see the horizontal scroll bar disppear */
  transform-origin: top left;
}

<div class="wrapper">
  <p>LargeText</p>
</div>

将比例更改为0.2并查看水平滚动条如何正确消失，而垂直滚动条则不然。

如果没有必要，我怎样才能让浏览器删除垂直滚动条，就像使用水平滚动条一样？

我用Chrome和Firefox测试了这个。

Answer 1

根据我的理解，在您看来，更改文本的比例会导致溢出仅在水平维度中生效，而不会在垂直维度中生效。情况并非如此，在这种情况下都被平等对待，但您为示例选择的确切值会掩盖实际行为。

我修改了您发布的示例，因此很容易以缩放因子交互式播放：

.wrapper {
  --scale: 1.0;
  background: orange;
}

p {
  font-size: 7.5em;
  margin: 0px;
  transform: scale(var(--scale));  /* Change to scale(0.2) to see the horizontal scroll bar disppear */
  transform-origin: top left;
}

<input type="range" id="scale" min="0.05" value="1" max="4" step="0.05" oninput="document.querySelector('.wrapper').style.setProperty('--scale', this.value)">
<div class="wrapper">
  <p>LongText</p>
</div>

在stackoverflow片段的默认大小调整中，<p>元素适合高度和宽度，因此不会出现滚动条：

增加比例会导致两个方向溢出：

你在你的例子中看到的是，垂直溢出总是发生，因为<p>元素的高度，即50em：

因为transform: scale()规则不会降低段落的内在大小，所以它总是至少为50em，几乎总是导致垂直溢出。

至于使用这些知识来解决你的问题，我建议从默认的auto大小开始，并使用scale > 1进行放大，而不是相反。