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

debugcn 发表于 Dev

埃里克·格兰奇

我正在尝试为元素添加大型CSS变换动画，以使其显示/消失。变换的大小很大，因为在该变换过程中，元素可能变得比屏幕大，从而影响滚动条。

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

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

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

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

是否有另一种选择来指示元素可以在不影响其父元素的边界框的情况下溢出其父元素（从而不触发任何滚动条）？

埃里克·格兰奇

解决方案是在动画元素上使用“ 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”将元素从流程中移出，这将影响其他元素的布局。为避免这种情况，必须插入相同大小的占位符元素。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。