HTML Body CSS Transform Scaling Up导致内容被删除

Question

我正在开发一个项目，我正在使用CSS转换来扩展整个页面。放大一点后，角落中的内容开始变得不可见，因为它们在可见范围之外。有没有办法通过使用变换缩放垂直或水平滚动来查看内容？

我目前正在使用Javascript来扩展身体

document.body.style.transform = 'scale(1.5)';

然而，这会切断页面上的一些内容。我需要它来工作，因为我继续从1.0扩展。

Answer 1

尝试调整transform-origin：

document.body.style.transformOrigin = 'top left';
document.body.style.transform = 'scale(' + scaleFactor + ')';

您可能还需要调整正文的宽度和高度以匹配缩放。

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

关于变换的说明。变换是虚构的，不会改变物理尺寸，包括x，y，宽度和高度。因此，您必须手动管理这些物理尺寸以匹配您的变换＆＃34; d＆＃34;尺寸，以保持滚动条的快乐。