Question

我使用webkit-transform缩放文档，如下所示。

document.body.style.WebkitTransform = 'scale(2)';

然后，下面用于调整滚动条大小以查看整个文档的代码不起作用。

document.body.style.overflow = 'scroll';

我尝试使用以下代码，但它们不起作用。

document.body.style.overflow = 'auto';

或

document.body.style.webkitOverflow = 'scroll';

缩放后文档是否被切断？（如果是这样，我看不到整个文档。）或者您是否有任何想法可以在缩放后调整整个文档，例如调整滚动条的大小？

Answer 1

再想一想，我认为你需要的是 Transform Origin ，

transform-origin 属性允许您修改原点元素的转换

假设在上面的例子中，这就是你想要的

document.body.style.WebkitTransform = 'scale(2)';

现在尝试播放文档的宽度和高度，这可能会修复视图，滚动条会出现......

var v_scale = 2.0;
document.body.style.transformOrigin = 'top left';
document.body.style.transform = 'scale(' + v_scale + ')';
document.body.style.width = 100 * v_scale + "%";
document.body.style.height = 100 * v_scale + "%";

默认情况下，变换的原点是＆＃34; 50％50％＆＃34;，它正好位于任何给定元素的中心。将原点更改为＆＃34;左上角＆＃34; （如上所示）使元素使用元素的左上角作为缩放点。

值可以是长度，百分比或关键字top, left, right, bottom,和center，只是尝试探索它们，直到找到适合您需求的那些。

出于好奇，你为什么要扩大整个身体？干杯

Answer 2

感谢Fahad，我可以解决我的问题。
Fahad建议我应用额外的填充和边距。我尝试了一些填充和边距。我发现应用额外的利润是解决方案。应用额外的边距，无论transformOrigin如何，我都可以扩展整个身体。非常感谢你！

使用webkit-transform缩放文档时，是否可以看到整个文档？

2 个答案: