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

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 ,

The transform-origin property lets you modify the origin for transformations of an element

假设在上面的示例中这就是您想要的

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 + "%";

默认情况下，变换的原点是“50% 50%”，它恰好位于任何给定元素的中心。将原点更改为“左上角”（如上所示）会导致元素使用元素的左上角作为缩放点。

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

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

Answer 2

感谢 Fahad，我可以解决我的问题。
Fahad 建议我应用额外的填充和边距。我尝试了一些填充和边距。我发现应用额外的边距是解决方案。应用额外的边距，无论 transformOrigin 是什么，我都可以放大整个 body。非常感谢！

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

Can I see the entire document when zooming the document using webkit-transform?

javascript

css

webkit

zooming

web