Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature request] Variable item height #1

Open
buu700 opened this issue Apr 28, 2017 · 5 comments
Open

[feature request] Variable item height #1

buu700 opened this issue Apr 28, 2017 · 5 comments

Comments

@buu700
Copy link

buu700 commented Apr 28, 2017

Ideally, this option would be able to make itemHeight be treated as a static height for only off-screen items, with items in the viewport being rendered with their normal dynamic heights.

Alternatively, itemHeight could be expanded to accept number|(item: any) => number and/or each item could optionally include a property (something like odVirtualScrollHeight) that would override the default itemHeight for that particular item.

@dinony
Copy link
Owner

dinony commented Apr 29, 2017

I'm thinking about ways to implement this. One option would be to say that each cell has it's own height but the row height is given by the max height cell in the respective row. So it should be possible to do one single pass on each vsData change to compute meta data on row positions and keep the scroll and resizing performance.

@buu700
Copy link
Author

buu700 commented May 18, 2017

By the way, any thoughts at this point on how much effort this feature will take and/or the general timeline on when it might eventually be implemented?

@dinony
Copy link
Owner

dinony commented Jun 7, 2017

Can't give you a timeline on that.. If I would know the heights of the cells in advance it would be no problem.. this definitely needs some research..

@buu700
Copy link
Author

buu700 commented Jun 7, 2017

Got it, thanks. Well, in that case, what about an option to do something like this?

  1. Immediately render an item (using some method of keeping it invisible, e.g. moving it off screen in some way or something like pointer-events: none; position: absolute; visibility: hidden;)

  2. Pass a boolean value into the template indicating whether or not it's this initial render

  3. Measure the height of the item

  4. Destroy the item

Edit: Nevermind, this idea probably doesn't make sense. It'd help in some cases where you're incrementally appending items and just don't want too many elements in the DOM at any one time, but if you have a massive list (say, 100k items) right from the start then you're still going to have to render all 100k of those items during the initial load, which defeats the point / would probably crash the browser tab.

I guess the best solution then is probably just some variation of allowing itemHeight to be a function.

@dinony
Copy link
Owner

dinony commented Jun 12, 2017

Yeah, this feature is not trivial... at least there is this problem, you've added in your edit :/

buu700 added a commit to buu700/od-virtualscroll that referenced this issue Nov 30, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants