bug: lock fails with native dialog modal
milan338 opened this issue · 6 comments
Version
1.2.1
Describe the bug
When attempting to lock scroll on showing a native dialog modal, it is still possible to scroll the content behind the modal.
To Reproduce
- Create an HTML
dialogelement - Call
dialog.showModal() - Call
lock(dialogRef) - Attempt to scroll
Expected behavior
The content should not scroll behind the modal after lock is called.
Additional context
Replacing $body from document.body with document.documentElement fixes the issue in setOverflowHiddenPc.
Hi~，would you like to provide an online reproduction demo？
| platform | link |
|---|---|
| jsbin | https://jsbin.com/cafiful/edit?output |
| codepen | https://codepen.io/buptsteve/pen/PvNQjP |
| jsfiddle | https://jsfiddle.net/buptsteve/6u8g3Lf5/ |
| codesandbox | https://codesandbox.io/s/o73z4jy5q9 |
I looked into this a bit more, and I found that the reason this was happening in my case was the root HTML element itself was scrolling due to some weird styling. Here's a codesandbox that shows this issue.
I looked into this a bit more, and I found that the reason this was happening in my case was the root HTML element itself was scrolling due to some weird styling. Here's a codesandbox that shows this issue.
Because of this?
It's working~ https://codesandbox.io/s/tua-body-scroll-lock-html-scroll-bug-forked-6x9p7m?file=/src/index.js
The scroll doesn't get locked for me, I'm still able to scroll the background.
I get it~
I'll fix it.