federicodirosa / react-window-scroller Goto Github PK

Hi @FedericoDiRosa, thank you for this library!

After upgrading my code to react 18, I noticed some performance issues on ios devices on browsers. it works fine on android.

after some experimenting, I noticed that this small change fixes the issue:

what do you think about this? am I overlooking anything? any comments are appreciated!

MDN:

The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.

For some reasons the offsetParent sometimes could be some other node, not the body (scroll container).

Example (modify from the example code):

 <>
  <nav
+  style={{
+    padding: '200px 0',
+  }}
  >
    {lists.map((list) => (
      <button key={list} onClick={() => setSelected(list)}>
        {list}
      </button>
    ))}
  </nav>

+ <div style={{ position: 'absolute', width: '100%' }}>
    {selected === 'Fixed List' && <FixedSizeList />}
    {selected === 'Variable List' && <VariableSizeList />}
    {selected === 'Fixed Grid' && <FixedSizeGrid />}
    {selected === 'Variable Grid' && <VariableSizeGrid />}
+ </div>
</>

Would see some blank at the top of list.

Is there a way to combine it with react-window-infinite-loader?
The problem I see here is that both InfiniteLoader and ReactWindowScroller provide their own refs to be passed to the List element.

Hi @FedericoDiRosa , great contribution to react-window here! I'm having an issue using your library, however. It seems that introducing react-window-scroller to my implementation causes the Grid's cell components to unmount and remount whenever the parent component re-renders. This is causing a highly degraded performance. Here is the only changes in code I made:

  return (
    <div ref={ref} style={{ flex: '1 1 auto', overflow: 'hidden' }}>
      <FixedSizeGrid
        rowCount={rowCount}
        columnCount={itemsPerRow}
        rowHeight={cardWidth + cardContentHeight + GRID_GAP}
        columnWidth={cardWidth}
        height={height}
        width={gridWidth}
        overscanRowCount={4}
        itemData={itemsData}
      >
        {CardItem}
      </FixedSizeGrid>
    </div>
  );

to

  return (
    <div ref={ref} style={{ flex: '1 1 auto', overflow: 'hidden' }}>
      {/* @ts-ignore */}
      <ReactWindowScroller isGrid>
        {({ ref: gridRef, outerRef, style, onScroll }) => {
          return (
            <FixedSizeGrid
              ref={gridRef}
              outerRef={outerRef}
              style={style}
              onScroll={onScroll}
              rowCount={rowCount}
              columnCount={itemsPerRow}
              rowHeight={cardWidth + cardContentHeight + GRID_GAP}
              columnWidth={cardWidth}
              height={height}
              width={gridWidth}
              overscanRowCount={4}
              itemData={itemsData}
            >
              {CardItem}
            </FixedSizeGrid>
          );
        }}
      </ReactWindowScroller>
    </div>
  );

As you can see in the screenshot below, when I resize the window or change the width size of the parent component, the page becomes very slow due to massive amounts of unmounting and remounting:

Hello.

Thanks for help in advance!

I have 2 issues that's I can't find how to fix:

1. Free space when the loader doesn't have next page. I tried to use List height parameter but it doesn't help http://prntscr.com/tgvznk
2. I can't solve warning "index.esm.js:217 Invalid list ref; please refer to InfiniteLoader documentation.". I can solve it without this scroller but I have no idea how to fix with. bvaughn/react-window#324 (comment)

code

 <InfiniteLoader
		isItemLoaded={isItemLoaded}
		itemCount={itemCount}
		loadMoreItems={loadMoreItems}
	>
		{({ onItemsRendered, loaderRef }) => (
			<ReactWindowScroller>
				{({ ref, outerRef, style, onScroll }) => {
					resetIndex = ref;
					return (
						<FeedListContext.Provider value={{ setSize, windowWidth, setDescriptionVisibility }}>
							<List
								className="List"
								style={style}
								height={window.innerHeight}
								itemCount={itemCount}
								itemSize={getSize}
								onItemsRendered={onItemsRendered}
								ref={ref}
								outerRef={outerRef}
								width="100%"
								onScroll={onScroll}
								overscanCount={6}
							>
								{Item}
							</List>
						</FeedListContext.Provider>
					);
				}}
			</ReactWindowScroller>
		)}
	</InfiniteLoader>

Thanks for the package!

useIsScrolling isn't working when FixedSizeList or FixedSizeGrid is wrapped with react window scroller.
The value of the isScrolling is always false.

💻 codesandbox

ref:
https://react-window.vercel.app/#/examples/list/scrolling-indicators

Hello,

I just started using this package, it works very well and does its job. Much thanks. But the overflow property is causing a small visual bug in react-window FixedSizeGrid component. This is probably because scrollbar takes some width/height from the grid. I didn't tested other react-window components yet, but it seems like changing overflow property to "unset" solves the visual bug. I don't know if "overflow : hidden" property plays an important role, but if not, changing it would be helpful. Again, thanks for this awesome package.

Hello,
I was following the issues on react-window and found your library through the comments, looks awesome.
I just wanted to make sure if it will work for my use case.

Basically, it's regular page with content stacked from top to bottom with the list as the top element.
I want to scroll through the list and the entirety of the page as well. Like if they were a single unit.

The demo showed a full height list with scrolling, is it possible to scroll to other content below? A demo maybe?

Edit:
I tried the example locally and it seemed like it works fine.
But the problem is that window is undefined because I use NextJs.

Any plans to support it?

I have an element that is explicitly scrollable, while the window is not. Since everything in this repo is defaulted to use window and cannot be overridden, anything below the fold in my lists are not displayed. I have determined the proper fix and am creating a PR, but wanted to tie it to an issue.

I recognize that this component is called react-window-scroller and not react-element-scroller, but I think this change will greatly enhance this components usability. It has worked very well for me for a long time.

thanks for good library

in edge(not chromium version) above is not working

const scrollTop = (document.documentElement.scrollTop || document.body.scrollTop) - offsetTop
const scrollLeft = (document.documentElement.scrollLeft || document.body.scrollLeft) - offsetLeft

this one is working

Hello! Thank you for this perfect library!
But I have some problem, in my project i use TypeScript, can u help me add support for this?

"react-window-scroller" dosen`t work on Vite

Hi

Im trying to use your package, and it great when scrolling vertically, but cant quite get it to work when scrolling horizontally. Currenly i'm combining it with react-window and react-table, but it doesn't seem like it goes hand in hand with these packages?

I've setup a codesandbox here: https://codesandbox.io/s/react-window-full-height-page-scroll-forked-f3mm7

Try scrolling a bit down the list, and then scroll horizontally - All content disappears, but re-emerges when scrolling vertically.
Any ideas to what's going on?

quick and dirty implementation

import { useRef, useEffect, useCallback } from "react";
import throttle from "lodash/throttle";

const windowScrollPositionKey = {
	y: "pageYOffset",
	x: "pageXOffset"
};

const documentScrollPositionKey = {
	y: "scrollTop",
	x: "scrollLeft"
};

const getScrollPosition = (axis, element) =>
	element?.[documentScrollPositionKey[axis]] ||
	window[windowScrollPositionKey[axis]] ||
	document.documentElement[documentScrollPositionKey[axis]] ||
	document.body[documentScrollPositionKey[axis]] ||
	0;

export const ReactWindowScroller = ({
	children,
	throttleTime = 10,
	isGrid = false,
	element = undefined
}) => {
	const ref = useRef();
	const outerRef = useRef();

	useEffect(() => {
		const handleWindowScroll = throttle(() => {
			const { offsetTop = 0, offsetLeft = 0 } = outerRef.current || {};
			const scrollTop = getScrollPosition("y", element) - offsetTop;
			const scrollLeft = getScrollPosition("x", element) - offsetLeft;
			if (isGrid) ref.current?.scrollTo({ scrollLeft, scrollTop });
			if (!isGrid) ref.current?.scrollTo(scrollTop);
		}, throttleTime);

		(element ?? window).addEventListener("scroll", handleWindowScroll);
		return () => {
			handleWindowScroll.cancel();
			(element ?? window).removeEventListener("scroll", handleWindowScroll);
		};
	}, [isGrid]);

	const onScroll = useCallback(
		({ scrollLeft, scrollTop, scrollOffset, scrollUpdateWasRequested }) => {
			if (!scrollUpdateWasRequested) return;
			const top = getScrollPosition("y", element);
			const left = getScrollPosition("x", element);
			const { offsetTop = 0, offsetLeft = 0 } = outerRef.current || {};

			scrollOffset += Math.min(top, offsetTop);
			scrollTop += Math.min(top, offsetTop);
			scrollLeft += Math.min(left, offsetLeft);

			if (!isGrid && scrollOffset !== top) (element ?? window).scrollTo(0, scrollOffset);
			if (isGrid && (scrollTop !== top || scrollLeft !== left)) {
				(element ?? window).scrollTo(scrollLeft, scrollTop);
			}
		},
		[isGrid]
	);

	return children({
		ref,
		outerRef,
		style: {
			width: isGrid ? "auto" : "100%",
			height: "100%",
			display: "inline-block"
		},
		onScroll
	});
};