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

Question

我正在开展一个元素，在该元素中我使用 CSS 转换来放大整个页面。稍微放大后， Angular 落的内容开始变得不可见，因为它们在可见范围之外。有没有一种方法可以通过使用变换缩放垂直或水平滚动来使内容仍然可见？

我目前正在使用 Javascript 像这样放大 body

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

但是，这会切断页面中的一些内容。当我从 1.0 继续扩展时，我需要它正常工作。

Answer 1

尝试调整变换原点:

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、宽度和高度。因此，您必须手动管理这些物理尺寸以匹配您的“转换”尺寸，以保持滚动条快乐。