cdk-virtual-scroll-viewport does not handle css position: sticky cleanly

[bdirito]

What is the expected behavior?

using the css attribute position: sticky should allow for elements to remain displayed according to their sticky parameters.

What is the current behavior?

This works for a while but then breaks after a point. Im assuming its a matter of the 'stickied' dom elements getting recycled.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-wnar6b-wzjdmh

This is a slightly modified version of an example from the docs. As you scroll the cdk-virtual-scroll-viewport you will notice the light blue headers stick to the the top of their area as expected. Once you exceed a certain amount of scrolling however the headers disappear. For me items 0-2 work but the 3rd one breaks.

Down below is an example using the [non-virtual] scrolling. Here the css attribute works as expected.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Forked from https://stackblitz.com/angular/apvvljrovad from the docs. no versions changed.

Is there anything else we should know?

#11621 also gets at my base requirement; wanting some elements of the virtual scroll list to 'stick around'. It would be ideal if standard css properties worked as via this ticket but that might be hard as the whole point of virtual-scroll is to remove things from the dom that 'shouldn't' be rendered. The position: sticky css attribute would seem to break those assumptions.

[ke1co1]

any luck? looking for same solution.

[gurshinder78]

Just following up on this, any update. This is must requirement for table with large dataset.

[ke1co1]

any luck? looking for same solution.

What i did to keep my header sticky was to use a sticky: true attribute in html.
example:

Hope this helps!

[Dassderdie]

@kelz2o3 I don't really get what your solution is. Could you add an example?

[ke1co1]

i added this to my header row like so

    <tr
      mat-header-row
      *matHeaderRowDef="displayedColumns; sticky: true"
    ></tr>

[gurshinder78]

sticky: true" is working fine with mat table if we don't use virtual scrolling, but it is messed up with virtual scrolling. Header starts moving when you start scrolling.

[florenthobein]

My use case is that I need a sticky header always present above a virtually-scrolling list ; I'm probably not the only one.
Would you guys accept a PR that allows such a behavior (namely, a sticky header)?

[lppedd]

Here too, same problem now. @florenthobein which kind of workaround have you come up with?
What's the root cause of this behavior?

Edit: okay, it seems transformY is the cause.

[florenthobein]

It's the transformY indeed, that gets updated whenever elements of the list are replaced (remove+append).

I don't really have a neat solution. Tried to meddle with extending the FixedSizeVirtualScrollStrategy and move back a provided sticky header whenever onRenderedOffsetChanged was triggered but it's ugly and still too far from when transformY is applied, resulting in random blips unsuited for production.

So for now my "workaround" consists in:

• having a header that is outside of the CDK Virtual Scroll and absolutely positioned over the list. Note: the header height has to be a multiple of your cdk itemSize.
• prepending the list with "fake" elements that are gonna be hidden behind the header (hence the need for a header that's the total height of those fake elements).

...yeah. 😓 And a bit of a mess to have the good width for the header as it's not positioned inside the list.

[lppedd]

@fabioloreggian Thanks for the explanation!
However, in the end I gave up, I don't want to use workaround that break over time

[wartab]

@florenthobein I found a solution to the tranformY compensation, but for some reason it's not sufficient, as once I started scrolling too far down, the headers will scroll with the content. Regardless, this is what I came up with after fiddling around a bit with the CDK scroll view port.

cdk-virtual-scroll-viewport {
    height: 100%;

    table {
        height: 100%;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;

        thead {
            tr {
                th {
                    height: 59px;
                    border-bottom: 1px solid #d0d0d0;
                    padding: 7px 20px 7px 7px;
                    position: sticky;
                    background-color: #ffffff;
                    top: 0;
            }
        }
    }
}

<cdk-virtual-scroll-viewport #scrollViewport itemSize="59" (scrolledIndexChange)="scrollIndexChanged($event)">
  <table>
    <thead>
      <tr>
        <th [style.transform]="inverseTranslation">Header 1</th>
        <th [style.transform]="inverseTranslation">Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr *cdkVirtualFor="let movement of movements; even as even; index as i" [class.even]="even">...</tr>
    </tbody>
  </table>
</cdk-virtual-scroll-viewport>

@ViewChild(CdkVirtualScrollViewport)
public viewPort: CdkVirtualScrollViewport;

public get inverseTranslation(): string {
    if (!this.viewPort || !this.viewPort["_renderedContentTransform"]) {
        return "translateY(0px)";
    }
    return this.viewPort["_renderedContentTransform"].replace(/translateY\((\d+)px\)/, "translateY(-$1px)");
}

That gets rid of the weird effects, but only until you scrolled down for a while. Not sure what I'm doing wrong and if that's even a problem I could solve. I'm not too familiar with sticky positions, it's still sometimes a mystery how that works exactly.

[monu0751]

@wartab your solution is partially worked.
When we scroll down after few moment headers disappear. Can you explain your code so i can find some solution. I'm also facing same challenge.

[wartab]

@monu0751 Sadly I do not know how to solve this. That is what I mean with "but for some reason it's not sufficient, as once I started scrolling too far down, the headers will scroll with the content".

This technique is to apply the opposite transform: translateY() to the column headers that CDK applies when using the virtual-scroll to create the scrollbar. This is done by adding a - sign in the regex replace.
That CSS transform is contained in a private field _renderedContentTransform in the VirtualScrollViewPort.