When Scrolled to bottom scrollOffset is not equal to scrollSize in Windows

[saqlain1020]

Describe the bug
Cannot determine by looking at scrollOffset, scrollSize and viewportSize that the user has scrolled to bottom.
scrollOffset + viewportSize does not equal scrollSize, the sum is usually 2-15 units different.

To Reproduce
Scroll to bottom in a virtual list then console vlist refrence and check scrollOffset,scrollSize and viewportSize to see if by any combination you can identify if user has scrolled to bottom

Expected behavior
scrollOffset should be equal to scrollSize.

Platform:

• OS: [Windows,]
• Browser: [Chrome]
• Version of this package: [0.8.2]

Additional context
If we can get refrence to the html element which has the scroll bar in onScroll event listener that would be make things easier.

[inokawa]

@saqlain1020
Hi, could you tell me the value of window.devicePixelRatio in your chrome browser? because it will be a problem only happens under specific dpr.

If we can get refrence to the html element which has the scroll bar in onScroll event listener that would be make things easier.

You can access html element of scroller with passing your custom component to components.Root prop like #154 (comment) .

[saqlain1020]

@inokawa

@saqlain1020 Hi, could you tell me the value of window.devicePixelRatio in your chrome browser? because it will be a problem only happens under specific dpr.

If we can get refrence to the html element which has the scroll bar in onScroll event listener that would be make things easier.

You can access html element of scroller with passing your custom component to components.Root prop.

window.devicePixelRatio is 1.25

[saqlain1020]

@inokawa How can i get html element ref, basically i am thinking of checking scrollHeight for determining if scrolled to bottom.
Can you write me a snippet or something, i can use a workaround like giving class to parent and using css selector to get the element, but it would be great if we can directly get the ref.
Thanks a lot!
Your library is working pretty great, and it's straight forward.

[inokawa]

Thank you!

My recommended workaround for now is just add offset for the error likescrollOffset > scrollSize - viewportSize - 1.5. It's actually used in at-bottom-detection of this lib for some PCs which has dpr like 1.25 not integer.

virtua/src/core/store.ts

Lines 223 to 224 in 146811e

	scrollOffset >
	getScrollOffsetMax() - SUBPIXEL_THRESHOLD

VListHandle.scrollSize returns actual scrollHeight of element currently so it may not solve the problem. However you can get the element of scroller like this:

useEffect(() => {
  const el = document.querySelector(".foo"); 
}, [])

<VList className="foo">
  {items}
</VList>

I'll try to investigate why they are not equal under some dpr.

[saqlain1020]

Also there is a warning in nextjs console that useLayoutEffect should not be used in server environment, i want to use VList on client side only, so take a look at it as well, might change useLayoutEffect to useEffect

[inokawa]

Also there is a warning in nextjs console that useLayoutEffect should not be used in server environment

I implemented not to use useLayoutEffect in server like this. Maybe it isn't working for some reason with Next.js... 🤔

virtua/src/react/useIsomorphicLayoutEffect.ts

Lines 4 to 5 in 146811e

	export const useIsomorphicLayoutEffect =
	typeof window !== "undefined" ? useLayoutEffect : useEffect;

[inokawa]

The warn will be fixed in 0.8.3. Thanks!

[inokawa]

I found that scrollSize from handle has rounded value but scrollSize internally used in this lib is not. I fixed that in 0.8.4 so you can get more precise scrollSize from handle.

I close this issue because I have no idea how to reduce the error further and I think the fix made we can detect at bottom stably now like this:

virtua/stories/basics/VList.stories.tsx

Lines 488 to 494 in bd877ce

	if (
	ref.current.scrollOffset -
	ref.current.scrollSize +
	ref.current.viewportSize >=
	// FIXME: The sum may not be 0 because of sub-pixel value when browser's window.devicePixelRatio has decimal value
	-1.5
	) {

Of Course any improvements and information are welcome.