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

Question

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

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

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

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

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

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

Answer 1

解决方案是在动画元素上使用“position: fixed”，在父元素上使用非静态位置。

然而，虽然这在 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 ...);

此外，使用“position: fixed”会使元素脱离流，这会影响其他元素的布局。为避免这种情况，必须插入具有相同大小的占位符元素。