ScrollArea onButtonReached does not call with decimal values

etwodev commented 1 week ago

Dependencies check up

[X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

^7.12.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

in ScrollArea there are instances where scrollTop is fractional, meaning onBottomReached will never be called - as this edge case is not handled, seen below:

          const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
          if (scrollTop - (scrollHeight - clientHeight) === 0) {
            onBottomReached?.();
          }

If scrollTop was a value such as 495.5, scrollHeight at 696 and clientHeight at 200, this would not call, despite being unable to scroll further.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-wtx8tg

Possible fix

Replace

          const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
          if (scrollTop - (scrollHeight - clientHeight) === 0) {
            onBottomReached?.();
          }

with

          const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
          if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
            onBottomReached?.();
          }

Self-service

[ ] I would be willing to implement a fix for this issue

Kenzo-Wada commented 1 week ago

I didn't reproduce on codesandbox environment, Has Reached Bottom become true :cry:

etwodev commented 1 week ago

I didn't reproduce on codesandbox environment, Has Reached Bottom become true 😢

Can confirm this issue doesn't seem present in Firefox, not sure about Safari, but it seems reproducible in Chrome Possibly only macOS chrome...

Kenzo-Wada commented 1 week ago

I see, I'll check it again on macos thanks! I was using Ubuntu...

etwodev commented 1 week ago

I see, I'll check it again on macos thanks! I was using Ubuntu...

Also realised my example was wrong, issue should persist in Firefox now :)

But it is likely due to the fact it's dependent on your device

Regardless, the experience is super inconsistent and doesn't ignore the fact that scrollTop can be decimal: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

mantinedev / mantine