search

html-next / vertical-collection

Infinite Scroll and Occlusion at > 60FPS
https://html-next.github.io/vertical-collection/
MIT License
176 stars 76 forks source link

latest version with embroider doesn't add elements as you scroll #395

Open BryanCrotaz opened 2 years ago

BryanCrotaz commented 2 years ago

items is a static array of complex objects generated asynchronously Not loading vertical-collection until the objects are ready It shows the first two (or more if buffer size arg is used) but never shows the rest. I'd expect them to appear as the user scrolls down. The closing occluded content has the correct initial height but the opening content always has a height of 0 and the closing content height doesn't change

<div style="height: 100vh;">
  {{#let (await this.pages) as |pages|}}
    {{#if pages}}
      <VerticalCollection 
        @items={{pages}}
        @estimateHeight="868" 
        @key="_pageIndex"
        as | page |>
        <div page={{page._pageIndex}} {{render-pdf-page page}} />
      </VerticalCollection>
    {{/if}}
  {{/let}}
</div>
BryanCrotaz commented 2 years ago

Turns out you need to add overflow:auto on the outer container. It would be nice if the docs mentioned this sort of thing if it's compulsory.

runspired commented 2 years ago

It's designed to work with whatever CSS you bring, but that does have constraints (if you want div vs body scrolling that needs to be setup, and the layout can't have errors meaning the browser needs to be able to correctly ascertain the positioning and height, which lots of folks don't realize they write broken css but lots of layouts are broken)