Comments (11)
Yeah i understood that
Assume that you have a pagelayout of header, footer, left sidebar and content (react-vrtualized list) is in the middle. Currenlty the scrollbar is coming only for the content wrapper div.
My usecase is, i want the scrollbar to be at the window level. Meaning the content wrapper should be window instead of wrapper div.
Any help appreciated 👍
from react-virtualized.
I don't think I understand. Even if your virtual list/table was 100% width and height of the viewport, you wouldn't be able to use window scroll because the scrollable region of items would be inside of the list/table. (That's how the virtualization is done.)
Maybe you could explain in a different way?
from react-virtualized.
I want to use the entire window as a scroll container instead of just a single div.
from react-virtualized.
But what would be the difference if the div was the full width and height of the window?
from react-virtualized.
Here's a visual I created of how react-virtualized works:
In this example, a list is 300 pixels tall. It contains 10 items, each with a row height of 60 pixels. This means that at any time only 5 or 6 rows will be visible. react-virtualized only renders those 5-6 rows though, but it creates a scrollable container that's 600 pixels tall (10 rows x 60 pixels each).
If the list was the entire height of the browser window, it would still work the same. (There would be a scrollable container large enough to contain all of the list items- but only enough to fill the visible viewport would be rendered.)
So basically... there would be no difference. :)
Going to close this issue. Feel free to ask a follow-up question if you have any.
from react-virtualized.
Something like this
from react-virtualized.
I don't understand why you'd want that, but maybe once you have it working you can show me and I would? :) Anyway... you could accomplish that by doing the following:
- Use a
fixed
position for your content so that it won't scroll with thewindow
. - Tell the
window
how much scrollable height it has so a scrollbar appears. (This is probably as simple asheightHeight + footerHeight + numRows * rowHeight
.) - Disable scrolling for your
VirtualScroll
via CSS (overflow: hidden
) so its scrollbars will not be visible. (You could do this by specifying a custom class viaclassName
or by overriding that property on the global.VirtualScroll
class.) - Listen to
window
scroll events and callVirtualScroll#setScrollTop
to scroll the list when the window scrolls.
I mentioned VirtualScroll
in the example above but Grid
and FlexTable
both also have similar set-scroll-position methods. You can find them in the docs.
from react-virtualized.
@bvaughn the following layout cannot currently be implemented with react-virtualized https://app.tech.eu/companies. If you see the virtual container with the list items is part of the whole page and scrolls along with the other elements. A height is set on the list container that is equivalent to the number of virtual list items but only the currently visible ones are rendered.
That is the use case + performance issues that made me implement something like this my self instead of using the existing open source ones. React virtualized seems performant enough on first look. It would be nice to support this kind of functionality.
from react-virtualized.
Does the approach I described above for @harrybabu not enable this sort of layout? It seems to me like it should. Maybe I'm missing something?
from react-virtualized.
The problem is that virtual scroll creates an inner scroll container. In the page I linked above I need other elements apart from the elements in the virtual list to be scrolling on the same container. The only way I can see your approach working is if I put every element inside the virtual scroller. I would have to put also in there the filters or any other text that goes above the list. Also the approach described seems a bit hacky and convoluted to me. As a first time user to the component I would definitely stay away from this. I am not currently using react-virtualized and I am giving this feedback only to make this better and because I think you dont fully understand the issue reported.
As far as fixing this maybe it does not make sense to cover all use cases anyways. Better do one thing and do it well than becoming a bloated and slow component. For the use case of scrolling inside a div the component seems to be working pretty well.
from react-virtualized.
That's why I mentioned steps 3 (disable the inner scroll) and 4 (relay window scroll info to the list/grid).
I do understand the issue being reported but I appreciate your offering extra context. I'm not sure this is something I want to support within any of my virtualized components for fear of bloating them. I could potentially create a HOC that could be used to decorate a virtual list and coordinate the pattern I mentioned above.
from react-virtualized.
Related Issues (20)
- Access to Multigrid public method recomputeGridSize() returns undefined
- Version 9.22.5 is a ghost not visible in this repository?
- Height Issue after rendering
- Virtualisation fail ? Why invisible content is added to my list ?
- react18.2.0 HOT 1
- Tips for displaying a dropdown to overflow the React Virtualized container without being hidden?
- Failed to fetch dynamically
- The styles.css isn't part of the 9.23.0 version
- How to load JSON-formatted data virtually?
- TypeError : RegisterChild in WindowScroller
- Props ScrollElement of WindowScroller load every items if parent is InfiniteLoader HOT 2
- Autosizer component does not accept any refs or spread props.
- Change scrolling approach for Table component HOT 1
- Table's data columns are not resized until scrolling the content [regression]
- `scrollToRow()` on `List` with `WindowScroller` not working HOT 3
- How to use search functionality similar to ctrl+f using react-virtualized HOT 1
- Rows with dynamic height overlap when using CellMeasurer HOT 1
- React Virtualized List - Scroll jumps to top when data updated HOT 3
- Grid/MultiGrid: TypeError: Super expression must either be null or a function HOT 1
- `WindowScroller` increases `scrollTop` value when a list row gets expanded
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-virtualized.