代码之家 › 专栏 › 技术社区 › zmbq

获取css缩放转换以更改垂直滚动条?

css-transforms css html

zmbq · 技术社区 · 6 年前

我正在尝试使用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测试过。

0 回复 | 直到 6 年前

Piotr Wicijowski 6 年前

据我所知,在您看来,更改文本的比例会导致溢出仅在水平维度上生效,而在垂直维度上无效。事实并非如此,在这种情况下,两者都被同等对待,但您为示例选择的确切值会模糊实际行为。

我已经修改了您发布的示例,因此很容易使用缩放因子交互播放:

.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 snippet的默认大小中, <p> 元素适合高度和宽度,因此不会显示滚动条:

增大比例会导致两个方向的溢出:

您在示例中看到的是,由于 <P & GT; 元素,它是 50em :

因为 transform: scale() 规则不会减小段落的内部大小,它至少会 50EM ,几乎总是导致垂直溢出。

至于使用这些知识来解决您的问题,我建议从默认值开始 auto 尺寸和用途 scale > 1 放大,而不是相反。

推荐文章

Jam3sn · 变量旋转文本的绝对位置

6 年前

John Balvin Arias · 当css transform:scale()处于活动状态时,单击边框按钮会触发单击

7 年前

Joshua Leung · 如何旋转文本并固定到右下角?

7 年前

marius · jQuery UI可选css转换问题

7 年前

jean-max · 矩形中的菱形HTML和CSS3

7 年前

Eugenio · 无极旋转DIV,但具有绝对定位

7 年前

Boucherie · CSS/SCSS rails转换div,但不是嵌套图像(rails)

7 年前

akhil regonda · 如何使用transform scale删除屏幕上显示的滚动条?

7 年前

JV Lobo · 具有transform属性的元素内的子元素z索引

7 年前

Scoob · 在flexbox中不工作的锚点元素上变换比例

7 年前