Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

先打开一个drawer,再打开drawer中的modal,关闭modal,关闭drawer,再打开另一个modal,关闭后body无法滚动 #23362

Closed
1 task done
KaiEi1020 opened this issue Apr 17, 2020 · 9 comments
Labels
🐛 Bug Ant Design Team had proved that this is a bug.

Comments

@KaiEi1020
Copy link

KaiEi1020 commented Apr 17, 2020

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. 点击open drawer按钮
  2. 点击抽屉中的open modal1按钮,
  3. 关闭modal1
  4. 关闭抽屉
  5. 点击open modal2按钮
  6. 关闭modal2
  7. body无法滚动

What is expected?

body可正常滚动

What is actually happening?

如上操作后body无法滚动

Environment Info
antd 4.1.3
React 16.13.1
System mac
Browser chrome
@KaiEi1020
Copy link
Author

KaiEi1020 commented Apr 17, 2020

drawer打开时,rc-drawer下的DrawerChild的toggleScrollingToDrawerAndBody方法会将body的overflow设置为“hidden”,在modal1关闭时,switchScrollingEffect中的条件if (openCount === 1 && !Object.keys(cacheOverflow).length)成立,cacheOverflow被赋值。modal2关闭时执行了switchScrollingEffect中else if中的内容。body被设置为"overflow: hidden"。个人见解,可以删掉DrawerChild的toggleScrollingToDrawerAndBody方法,因为看上去已经在rc-drawer的外层做了固定body的处理了

@hengkx hengkx added the 🐛 Bug Ant Design Team had proved that this is a bug. label Apr 17, 2020
@afc163
Copy link
Member

afc163 commented Apr 17, 2020

Duplicate of #21894

@afc163 afc163 marked this as a duplicate of #21894 Apr 17, 2020
@afc163 afc163 closed this as completed Apr 17, 2020
@KaiEi1020 KaiEi1020 changed the title drawer中使用modal导致body无法滚动 先打开一个drawer,再打开drawer中的modal,关闭modal,关闭drawer,再打开另一个modal,关闭后body无法滚动 Apr 21, 2020
@KaiEi1020
Copy link
Author

not duplicate of #21894

@katteXu
Copy link

katteXu commented Feb 3, 2021

为什么关了 还没解决 怎么给关了呢

@swustzzh
Copy link

为什么关了 还没解决 怎么给关了呢

我用4.15.0也遇到了,感觉没修复,然后问题都关了

@black0923
Copy link

我加了下面样式解决的
html,
body {
width: 100%;
height: 100%;
overflow-y: auto !important;
}
你可以试试
"antd": "^4.2.0"

@g17628381307
Copy link

我加了下面样式解决的 html, body { width: 100%; height: 100%; overflow-y: auto !important; } 你可以试试 "antd": "^4.2.0"

这样会造成Drawer和Body 滚动条都会出现的呀

@LOWINC
Copy link

LOWINC commented Jul 12, 2023

function removeStyle() {
  const styleTags = document.getElementsByTagName('style');
  for (let i = 0; i < styleTags.length; i++) {
    const rcUtilKey = styleTags[i].getAttribute('rc-util-key');
    if (rcUtilKey?.indexOf('rc-util-locker') === 0) {
      styleTags[i].remove();
    }
  }
}

window.addEventListener('popstate', () => {
  removeStyle();
});

window.addEventListener('load', () => {
  removeStyle();
});

@swustzzh
Copy link

swustzzh commented Jul 12, 2023 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug Ant Design Team had proved that this is a bug.
Projects
None yet
Development

No branches or pull requests

8 participants