mute-gold

Add content to scrolling container

Absolutely love the library. Thank you so much for all the incredible work! I have a virtual list with sticky headers among the data. I have read through the sticky header example, and have that working perfectly. The twist is, I have other content I want to put above my virtualized content, but still inside the "parent" (scrolling) container. I have a sticky menu above my virtualized rows, with position:sticky and top:0. I stuck that content where the comment { /* -----> Is it valid to put stuff here? <--------- */ } below, is. That worked perfectly (my data's sticky headers obviously now have a top: of X, where X is the height of this sticky content). But above that I want to put regular content that would be scrolled off screen. Unfortunately that's where things break. The rangeExtractor function starts getting incorrect data on which rows are visible. To sum up: when I have a single piece of content fixed with position sticky, and top:0, above my virtualized rows, all is fine. But when I add content above that, that's not fixed, and can scroll off, things break. It feels like react-virtual is calculating space available initially, which breaks as some content above my virtualized data scrolls off screen. Even then, though, it only breaks in my rangeExtractor function, which I use to find my sticky data rows. Without the sticky headers within my data all would be fine. Is this in fact that what's happening, and is there a workaround? ------------

{/* The scrollable element for your list */}
   <div
      ref={parentRef}
      style={{
         height: `400px`,
         overflow: 'auto', // Make it scroll!
      }}
    >
       { /* -----> Is it valid to put stuff here? <--------- */ }
       {/* The large inner element to hold all of the items */}
       <div
         style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
       >

{/* The scrollable element for your list */}
   <div
      ref={parentRef}
      style={{
         height: `400px`,
         overflow: 'auto', // Make it scroll!
      }}
    >
       { /* -----> Is it valid to put stuff here? <--------- */ }
       {/* The large inner element to hold all of the items */}
       <div
         style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
       >

20 Replies

mute-goldOP•3y ago

Here's a live demo of the problem https://codesandbox.io/p/sandbox/weathered-framework-ytkmh8?file=%2Fsrc%2Fmain.tsx%3A1%2C1

weathered-framework-ytkmh8

CodeSandbox is an online editor tailored for web applications.

quickest-silver•3y ago

Can you clarify how the broken behavior is visible in the demo? When I scroll through the list of names, it seems to work fine, I'm having trouble seeing where the incorrect data rows are being shown

quickest-silver•3y ago

Is this boundary what you're talking about?

mute-goldOP•3y ago

Sorry! It breaks when the next sticky header in the grid comes up. Basically, the red box messes up the rangeExtractor function. It seems like that red box hurts react-virtual's abiity to know which rows are visible, and which are not

constant-blue•3y ago

I'm sorry, I don't see the issue When I scroll, the red box scrolls out of view until the blue box sticks to the top, along with the headers stuck underneath that Oh wait This is about the sticky headers popping into the range extractor before they should, right? What we need is something like virtualPaddingStart and virtualPaddingEnd Which you could then set to the computed height of your red box

mute-goldOP•3y ago

Yes exactly. @Tanner Linsley so to make sure I understand, this isn't possible yet, and would require a new feature in react-virtual?

constant-blue•3y ago

I'm still not sure Want to make sure I really get it

mute-goldOP•3y ago

The range extractor basically gets incorrect data because of the red box (but not the blue one), which causes the sticky headers in the data A, B, C etc to get pulled up before they should Basically scroll to the end of the A names, and you'll see the B sticky header get pulled up before it should.

constant-blue•3y ago

Try this: https://codesandbox.io/p/sandbox/heuristic-river-cc9cty?file=%2Fsrc%2Fmain.tsx%3A39%2C19

heuristic-river-cc9cty

CodeSandbox is an online editor tailored for web applications.

mute-goldOP•3y ago

hm that overshoots in the oposite direction - now the next sticky header (letter) overshoots the existing one, and then takes its place in the sticky slot

constant-blue•3y ago

Right, but I think this illustrates the shortcoming better The range extractor isn't taking into account padding

mute-goldOP•3y ago

constant-blue•3y ago

I'm not totally sure how to fix this. I haven't been in virtual for a while @piecyk would probably be the most knowledgable person to ask about this After we get this figured out, I'd like to 1.0 this shiz

mute-goldOP•3y ago

it's an amazing tool! I really appreciate you taking a look. Hopefully Piecyk will have a trick 🙂

constant-blue•3y ago

Yeah With enough time studying, I could figure it out, but i'm DEEP in TanStack Router/Loaders/Actions land right now

mute-goldOP•3y ago

oh dude no worries at all - frankly that's a much, much better use of your time than this extremely bespoke edge case 🙂

conscious-sapphire•3y ago

Hi @AdamRackis sorry for late replay, basic we have scrollMargin prop exactly for this, to shift from where the list starts. The trick here is, that is added to elements ( we don't subtract it by default as in some cases is desired ) to make it back position you need to move it back by the margin ) Checkout this if it fix your issue https://codesandbox.io/p/sandbox/stoic-rgb-5j3xj8?file=/src/main.tsx:1,1

stoic-rgb-5j3xj8

constant-blue•3y ago

That appears to fix it for me But I’ll wait to see what @AdamRackis has to say

flat-fuchsia•3y ago

No I’m sorry for the late response. I’ll check this tonight but I’m sure it’s exactly what I need. Thank you!!!

mute-goldOP•3y ago

Just confirmed - that's it. Thank you so much!

Gaming

Programming

Add content to scrolling container

Did you find this page helpful?