如何让 CSS 缩放元素不影响页面滚动条？答案

【问题标题】：How to have a CSS scaled element not affect page scrollbars?如何让 CSS 缩放元素不影响页面滚动条？
【发布时间】：2021-02-10 00:45:29
【问题描述】：

我正在尝试为元素制作大规模 CSS 变换动画以使其出现/消失。变换的尺寸很大，因为在变换过程中，元素可能会变得比屏幕大，因此会影响滚动条。

我希望它不会影响滚动条，同时仍然允许页面有滚动条（所以 body / overflow: hidden 不是一个选项）。

这将是一个通用效果，因此我无法控制效果将运行的页面布局。

我能想到的最好的办法是有一个完整的页面 div，隐藏溢出，并在那里运行效果，但这意味着将元素移出其正常 DOM，这会破坏所有 CSS 样式，具体取决于其父级元素/类。

我尝试的另一种方法是使用“位置：固定”从流中删除元素，它消除了滚动条问题，但这样做会影响页面上其他元素的布局（因为它们将被移动以填充新在布局中创建了“洞”）。

是否有其他选项可以指示元素可以溢出其父级，同时不影响其父级的边界框（因此不会触发任何滚动条）？

【问题讨论】：

也许你可以做一个可重现的例子？
恐怕一个可重复的示例将无济于事，因为它会得出特定于示例的答案，而我追求的是通用解决方案，但你去jsbin.com/vafafujuya/edit?html,css,js,output

标签： html css scrollbar transform bounding-box

【解决方案1】：

解决方案是在动画元素上使用“位置：固定”，在父元素上使用非静态位置。

然而，虽然这在 Firefox 中有效，但它适用于 Chromium 浏览器（至少 86）：您必须强制回流以确保考虑到“位置：固定”，否则滚动条仍然会受到影响。

然后是伪代码

elem.style.position = 'fixed';
if ( (elem.parentNode.style.position || 'static') == 'static) {
    elem.parentNode.style.position = 'relative';
}

// Force a reflow, so that the position change is taken into account for the animation
window.getComputedStyle(container.firstChild).width;

elem.animate(... your animation here ...);

另外作为使用“位置：固定”将元素从流中取出，它会影响其他元素的布局。为避免这种情况，需要插入一个大小相同的占位符元素。

【讨论】：