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

Question

我正在尝试为一个元素制作大规模 CSS 变换动画，以使其成为 appear/disappear。变换的尺寸很大，因为在变换期间，元素可能会变得比屏幕大，因此会影响滚动条。

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

这是一个通用效果，因此我无法控制效果运行.

的页面布局

我能想到的最好的办法是制作一个完整的页面 div，隐藏溢出，运行那里的效果，但这意味着将元素移出其正常 DOM，它根据其父级 elements/classes.

打破所有 CSS 样式

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

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

Answer 1

解决方案是在动画元素上使用“position: fixed”，在父元素上使用 non-static 位置。

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

那么pseudo-code就是

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”会使元素脱离流，会影响其他元素的布局。为避免这种情况，必须插入一个相同大小的占位符元素。

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

How to have a CSS scaled element not affect page scrollbars?

html

css

transform

scrollbar

bounding-box