ScrollArea onButtonReached does not call with decimal values

[etwodev]

Dependencies check up

• 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]

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

[etwodev]

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]

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

[etwodev]

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

[rtivital]

Fixed in 7.13.2

[AlexeyEsin]

It still doesn't work in some cases. In my case, when using MultiSelect with 24 entries in data, onBottomReached does not work in Chrome.

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

I tried the solution presented by @etwodev and it worked. I passed the onScroll callback to viewportProps, which is in scrollAreaProps, and the log is triggered just like onBottomReached should be triggered.

const onScroll = (e: UIEvent) => {
  const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
  if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
    console.log('bottom reached');
  }
};

Therefore, it seems that this solution is more correct than the current one.