如何使CSS缩放的元素不影响页面滚动条？

问题描述

我正在尝试对元素进行大规模CSS转换动画，以使其显示/消失。转换的大小很大，因为在转换期间，元素可能变得比屏幕大，从而影响滚动条。

我希望它不影响滚动条，同时仍允许页面具有滚动条（因此主体/溢出：隐藏是不可选项）。

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

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

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

是否还有另一种选择来表示元素可以溢出其父元素，同时又不影响其父元素的边界框（从而不触发任何滚动条）？

解决方法

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

尽管该功能在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”将元素从流程中移出，这将影响其他元素的布局。为避免这种情况，有必要插入相同大小的占位符元素。