Unable to make elements sticky due to overflow: hidden under the hood of DynamicScroller

[ghost]

trafficstars

Describe the bug

I create a table where each row is wrapped by DynamicScrollerItem. My task is to do a sticky column. I use position: sticky to make specific cells sticky.

The problem is position: sticky doesn't work if any of sticky element parents have overflow: hidden.

Element with class vue-recycle-scroller__item-wrapper which is under the hood of vue-virtual-scroller has overflow: hidden that makes impossible to make sticky elements inside it.

Reproduction

Create simple table using DynamicScroller. Try to make any column sticky.

Expected result: Cells of sepcific column are sticky.

Actual result: position sticky doesn't work due to overflow: hidden under the hood of vue-virtual-scroller.

System Info

Not required.

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[ghost]

There is an explanation why position: sticky doesn't work: https://stackoverflow.com/questions/43909940/why-does-overflowhidden-prevent-positionsticky-from-working

[ghost]

There is official doc related to this: https://www.w3.org/TR/css-position-3/#sticky-pos