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

interest in a "getFractionalVisibleRange" method: #217

Open
tnrich opened this issue Sep 9, 2018 · 0 comments
Open

interest in a "getFractionalVisibleRange" method: #217

tnrich opened this issue Sep 9, 2018 · 0 comments

Comments

@tnrich
Copy link
Contributor

tnrich commented Sep 9, 2018

In my local fork of react list I wrote a helper method based on getVisibleRange. It is useful for me because I'm making a minimap of the whole list that needs to show exactly what is being shown in the list. This is contrived and fake data, but I think you can see the general idea:

image

The blue highlight layer is tracking the scroll percentage and to get the fraction of the scroll, I use getFractionalVisibleRange:

Here it is:

getFractionalVisibleRange() {
    const { from, size } = this.state;
    const { start, end } = this.getStartAndEnd(0);
    const cache = {};
    let first, last;

    for (let i = from; i < from + size; ++i) {
      const itemStart = this.getSpaceBefore(i, cache);
      const itemEnd = itemStart + this.getSizeOf(i);
      if (first == null && itemEnd > start)
        first = i + 1 - (itemEnd - start) / (itemEnd - itemStart);
      if (first != null && itemStart < end)
        last = i - (itemEnd - end) / (itemEnd - itemStart);
    }
    return [first, last];
  }

Anyways, I thought it might be useful to someone else or could maybe even be added to the library.

@caseywebdev

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant