Comments (13)
If you really need a window scroller, you can just use the one of react-virtalized.
WindowScroller
https://codesandbox.io/s/vy620pkzzy
WindowScroller with dynamic content
https://codesandbox.io/s/xvl23p7okp
from react-window.
WindowScroller
was one of those painful to maintain components. I see the usefulness of it, but I'm not sure I'm interested in committing to maintain another one. I would prefer instead, if possible, for an external component to be built (and published separately) that implements this functionality on top of react-window.
I might be willing to make a couple of changes to react-window to support such a component, if it existed, depending on how complex they would be.
Maybe a good initial start would be for someone (you?) to submit a PR that adds it to this library directly– so we could see how complicated it might be to publish separately.
from react-window.
If you really need a window scroller, you can just use the one of react-virtalized.
WindowScroller
https://codesandbox.io/s/vy620pkzzyWindowScroller with dynamic content
https://codesandbox.io/s/xvl23p7okp
FYI for anyone considering these examples, please note that use of window.innerWidth
and window.innerHeight
does not account the presence of scrollbars. The scrollbar size, which varies by browser/device (and whether these is enough content for them to be presented), needs to be deducted.
from react-window.
@kgregory, any idea how this would work with InfiniteLoader
? In the example you provide, WindowScroller
's onScroll
uses a ref created in the outer scope and applied to List
, but if you use InfiniteLoader
, the child callback for InfiniteLoader
gets a ref
from its arguments and applies that to List
. It doesn't seem like it's possible to use the same ref for both requirements. Everything I've tried so far hasn't worked.
from react-window.
I think I'm going to close this issue for now since I don't plan on taking any action on it—and the long term plan (in my mind at least) was a separate module anyway. I'd still be happy to take a look at a proposal though!
from react-window.
I was able to get some issues fixed in @PascalSenn 's codesandbox, but ended up making two of my own to test out a few things that are relevant to my project. I'm posting this here in case it's of use to anyone.
FixedSizeList example: https://codesandbox.io/s/react-window-with-windowscroller-fixedsizelist-xujgi
VariableSizeGrid example: https://codesandbox.io/s/react-window-with-windowscroller-variablesizegrid-7kbwn
from react-window.
@carlosagsmendes
To fix your issue, you have to fallback on doc which is explaining that for Grid, you have to provide another param signature than Lists
scrollTo({scrollLeft: number, scrollTop: number})
=> https://react-window.now.sh/#/api/FixedSizeGrid
Hope this will help...
Note: take care of the CSS trick of @PascalSenn
// This height will override the window.innerHeight set in JSX : height={window.innerHeight}
.window-scroller-override {
height: 100% !important;
}
To give help, here a sample with Grid working : https://codesandbox.io/s/wq301o8qz7
from react-window.
Hu @PascalSenn , are you using the WindowScroller from react-virtualized with success? Thanks in advance
from react-window.
Hi again @PascalSenn , I'm trying your approach with a grid but it is not working for me. Can you help?
Thanks in advance
from react-window.
@bvaughn ,Can we control the rolling speed ? Virtual list is very needed to prevent sliding too fast and rendering without elements
from react-window.
@mrdanimal see this answer to reference the list ref with the ref that comes from InfiniteLoader: #417 (comment)
from react-window.
It doesn't seem to work with DynamicSizeList. Does anyone know a workaround? It would save me a lot of trouble
from react-window.
I don't get it.
If we import WindowScroller from react-virtualized
, isn't an additional 116kB to the website?
then should we use react-virtualized
instead of?
from react-window.
Related Issues (20)
- Can I replace the blank spaces which is caused by scrolling fast with other components?
- Remove nodes in pairs to avoid zebra stripe flashing HOT 1
- Need access to current scroll offset to avoid two lists scrolling each other exceed maximum rerender depth. HOT 1
- Scroll synchronization of List and Grid lagging HOT 2
- Why is the onscroll method triggered when the page is first rendered HOT 1
- Styling are not added properly in Table body
- Add "behavior" option for scroll methods
- VariableSizeGrid has issue when row count over 1000
- Section Header
- Deteriorated performance on lists exceeding 1000 elements
- Can't use react-window in vite react-ts HOT 1
- innerElementType doesn't work
- Input is losing focus , when wrapped with VariableSizeList HOT 2
- when i use "WindowScroller", why the page is constantly refreshing?
- Shifting all items in a list
- Loading indicator while it loads all 1m rows HOT 1
- onClick inside <List /> element doesn't work HOT 1
- Blanks appear on fast scrolling in react 18 use createRoot HOT 2
- add new item error when use VariableSizeList
- Allow canceling scroll
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 react-window.