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

user_76349 0
Viewed 416

I am trying to have a large scale CSS transform animation for an element to make it appear/disappear. The transform is large in terms of size, as during that transform, the element can become larger than the screen, and thus will affect the scrollbars.

I would like it to not affect the scrollbars, while at the same time still allowing the page to have scrollbars (so body / overflow: hidden is not an option).

This would be for a generic effect, and thus I have no control on the page layout where the effect will run.

The best thing I could come up with is to have a full page div, with overflow hidden, and run the effect there, however that means moving the element out of its normal DOM, which break all CSS styling depending on its parent elements/classes.

Another approach I tried is to remove the element from the flow using "position: fixed", it eliminates the scrollbar issue, but doing so affects the layout of other elements on the page (as they will be moved to fill the newly created "hole" in the layout).

Is there another option to indicate that an element can overflow its parent, while not affecting the bounding box of its parents (and thus not triggering any scrollbars) ?

bounding-box transform scrollbar css html
1 Answers

The solution is to use "position: fixed" on the animated element, and a non-static position on the parent element.

However while that works in Firefox, it is with Chromium browsers (86 at least): you have to force the reflow to ensure the "position: fixed" is taken into account, otherwise the scrollbars will still be affected.

The pseudo-code is then

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 ...);

Additionally as using "position: fixed" will take the element out of the flow, it will affect the layout of other elements. To avoid that it is necessary to insert a placeholder element with the same size.

user_763490
Related