Horizontal scroll Shift+Wheel in modal window unstable work

[GabbereX]

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?

"@mantine/core": "^8.1.2", "@mantine/hooks": "^8.1.2", "@mantine/modals": "^8.1.2",

What package has an issue?

@mantine/modals

What framework do you use?

React Router

In which browsers you can reproduce the issue?

All

Describe the bug

I have a component that creates a horizontal scroll. There are no problems outside the modal window. The following scenarios caused problems inside the modal window:

• Hold down Shift and scroll with the wheel - It is expected that scrolling will be left or right.

1. If there is no vertical scrollbar, then there are no horizontal scroll movements at all.
2. If the vertical scroll is scrolled to 0%, then the horizontal does not move to the left, but moves to the right.
3. If the vertical scroll is scrolled to 100%, then the horizontal one does not move to the right, but it moves to the left.
4. If the vertical scroll is scrolled by 1-99%, then there are no problems with the horizontal scroll.

modals.open({
  id: item.id,
  title: (
    <Title component='p' order={4}>
      {item.name}
    </Title>
   ),
      size: '100%',
      centered: true,
      overlayProps: { blur: 3 },
      children: <CustomComponent {...{ ...record, columns }} />
   })

Please note that the horizontal scroll can be located outside the component or inside the component, the result is always the same.

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

No response

Possible fix

I don't know how to solve this, I tried to hack it by handling onWhell, disabled scroll styles. All this did not give results. Perhaps there is some error in the scroll bar handler. It is unlikely that I will be able to solve this problem.

Self-service

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

Reproduced

[rtivital]

Thanks for submitting the issue! In order to proceed, we need a codesandbox with a minimal reproduction. You can use this template to create it – https://codesandbox.io/s/mantine-react-template-q4dd5d?file=/src/App.js.

To learn what is a minimal, reproducible example, please see the article – https://stackoverflow.com/help/minimal-reproducible-example. In short: Minimal reproducible example (MRE) includes only the essential code and data needed to reproduce the problem, excluding unrelated details or complexities. An effective MRE ensures that others can quickly replicate the issue in their own environment without requiring additional context or assumptions.

Please note that issues without reproduction are closed as incomplete if the reproduction is not provided until the next round of issues review (usually 5-10 days after this comment has been posted).

[GabbereX]

Thanks for submitting the issue! In order to proceed, we need a codesandbox with a minimal reproduction. You can use this template to create it – https://codesandbox.io/s/mantine-react-template-q4dd5d?file=/src/App.js.

To learn what is a minimal, reproducible example, please see the article – https://stackoverflow.com/help/minimal-reproducible-example. In short: Minimal reproducible example (MRE) includes only the essential code and data needed to reproduce the problem, excluding unrelated details or complexities. An effective MRE ensures that others can quickly replicate the issue in their own environment without requiring additional context or assumptions.

Please note that issues without reproduction are closed as incomplete if the reproduction is not provided until the next round of issues review (usually 5-10 days after this comment has been posted).

Reproduced

How Shift + Mouse‑Wheel Horizontal Scrolling Works

Basic action: Hold down Shift and roll the mouse wheel while hovering over the scrollable block. This should scroll the content left or right instead of up/down. Scenarios by Vertical‑Scroll Position No vertical scrollbar present The content fits entirely in the vertical direction.

Result: Horizontal scrolling is disabled (nothing happens). Vertical scroll at 0% (top of content) You’re all the way at the top.

Result: Wheel ↑ (away from you) → scroll right Wheel ↓ (toward you) → no leftward movement (only rightward is allowed) Vertical scroll at 100% (bottom of content) You’re all the way at the bottom.

Result: Wheel ↓ (toward you) → scroll left Wheel ↑ (away from you) → no rightward movement (only leftward is allowed) Vertical scroll between 1% and 99% You’re somewhere in the middle.

Result: Normal horizontal scrolling in both directions: Wheel ↑ → scroll right Wheel ↓ → scroll left

---

Сhecked in browsers: Firefox, Chrome, Vivaldi, Yandex Browser, Edge OS: Windows 11

[AliAkrem]

hey, I just found that setting lockScroll=false (which is true by default) can solve the issue, but on the other hand, it enables the scrolling of the back window