Comments (8)
update: after almost giving up fixing the remaining issue (adjust scroll position when filter list) I finally solved it! The demo has been updated and next I'd like to do a PR with clean code
So @Rich-Harris maybe now is a good time to get your attention :) My proposal:
- add a new method "scrollToIndex"
<VirtualList {items} bind:scrollToIndex}></VirtualList>
- update README documentation
- close 4 related issues
Any thoughts before I start coding?
from svelte-virtual-list.
Very nice. Thanks! Apparently your _scrollTo3
solves my problem!! đ
#50
from svelte-virtual-list.
great work!
REPL: https://svelte.dev/repl/1c36db7c1e7e4ef2bfb04874321412e5?version=3.20.1
should be merged.
from svelte-virtual-list.
I am preparing a pull request. Fork, cleanup, testing is done. One issue remains in logs:
"<VirtualList> was created with unknown prop 'scrollToIndex'"
How to properly expose a function / "method" so it can be called from outside? I played with bind: let: use:
but don't get it :/
update:
bam got it - the consumer of binds to the exposed function scrollToIndex
. Outside I've initialized a same named variable to bind to ... with a noop function
<script>
export let scrollToIndex = () => {} // this should be "undefined"
</script>
<div class="List">
<VirtualList {items}
bind:start
bind:end
bind:scrollToIndex
let:item
>
<ListItem {item}/>
</VirtualList>
</div>
initializing with explicit undefined
is correct https://stackoverflow.com/a/58574086/3313410 - thx @Rich-Harris
updating demo and opening PR shortly đ
from svelte-virtual-list.
attempting to create a "scrollTo" method, that scrolls an element by index at start
, if list borders not hit. Problems so far:
- programmatically scrolling until item is in view works gets blocked in repl after about 10 calls to
viewport.scrollTo
as of "infinite loop" detection (even if its a for loop with a limit of 99 iterations)- This approach is not elegant and just does, what user would do manually with the mouse wheel - but it still works for rows with variable height
- calculating exact scroll disatance only reliable, if items have a fixed height by CSS. The property
itemHeight
does not control the actual row style, so the height has to be manually synced by user with correct calculation of box-height / border-width / padding / margin / box-sizing => to px value- as a result I find it more reliable to avoid
itemHeight
, instead just mind for a fixed height in CSS and letaverage_height
take care of getting the rows computed pixel height
- as a result I find it more reliable to avoid
refresh
is missing a check, if new list length is shorter than current scrollstart
- solution: call
scrollTo(list.length - 1)
- solution: call
handle_scroll
has this part, that should stabilize scrolling up:// prevent jumping if we scrolled up into unknown territory
but this block somehow causes the position to be 0- removing it works better
- if rows have dynamic height, list seems not to scroll to the very bottom (jumps up and down). This especially is problematic with the "chat" use case, because messages vary greatly in content size
from svelte-virtual-list.
solved problems to this point:
- "lazy loading" âī¸ : Works as expected without further changes
- "jump to song" use case âī¸ : As soon rows have a fixed height, the "jumpToIndex" method works very well
- "filter" use case âī¸ â The new check fires, but items only rendered sometimes
- problem seems to appear if list.length = 1000, start is at about 400, then filter reduces length to about 250. It works though, if scrolled to bottom or on second filter call
- edit: fixed âī¸
tested in firefox
from svelte-virtual-list.
Here is a webm of the demo đŧ
https://windtanz.windcloud.de/index.php/s/d43AbLtXw9mimj9
from svelte-virtual-list.
âšī¸ published fork
https://www.npmjs.com/package/svelte-virtual-list-ce
from svelte-virtual-list.
Related Issues (20)
- Guard not defined when compiling in Svelte REPL HOT 1
- Get index of the item HOT 3
- Img tags without height causes issues.
- IE11 - error thrown HOT 1
- Expose the view port scroll event
- Expensive mounting HOT 3
- All items get rendered
- List is not accessible
- Can we deploy this with npm? HOT 1
- How to scroll to invisible element in the list? HOT 2
- Unique identifier stability problem when changing the list. HOT 1
- Documentation example should include a container with height
- JS Code in items slow down page scrolling
- Best way of adding padding to the first list item HOT 1
- Animation when item removed from list ?
- Is this still updated? HOT 2
- VirtualList unable to accommodate items of different sizes.
- Two bugs?
- It doesn't seem to work with Semantic HTML HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
đ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. đđđ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google â¤ī¸ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-virtual-list.