ant-design Modal background scroll iOS

deikduxw  于 2022-12-31  发布在  iOS
关注(0)|答案(6)|浏览(165)
  • I have searched the issues of this repository and believe that this is not a duplicate.

https://ant.design/components/modal/#header

Steps to reproduce

  1. Go to https://ant.design/components/modal/#header
  2. Scroll a little bit to hide browser header
  3. Open modal
  4. Scroll at the background

What is expected?

Scroll at background should be disabled

What is actually happening?

Scroll is not disabled

EnvironmentInfo
antd4.1.3
React16.8.6
SystemiOS 13.3.1
BrowserChrome 77.0.3865.103
col17t5w

col17t5w1#

Could you provide a gif for this? I can not reproduce this.

mrfwxfqh

mrfwxfqh3#

Hmmm....Strange... Why mobile device still can scroll even set overflow: hidden ...

zte4gxcn

zte4gxcn4#

Hello @ops1ops. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @ops1ops, 我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的 预设模板 ,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献!

qmb5sa22

qmb5sa225#

@zombieJ, this is common problem for iOS, so there are a lot of workarounds, i used this one:

// */Modal.css (or any file u want which will be in final bundle)

.scroll-disabled {
  overflow: hidden;
  position: fixed;
}

// */utils/bodyScrollLock.js

let scrollPosition = 0;
let body;
const DISABLE_SCROLLING_CLASS = 'scroll-disabled';

export default {
  enable() {
    scrollPosition = window.pageYOffset;

    body = document.querySelector('body');
    body.classList.add(DISABLE_SCROLLING_CLASS);
    body.style.top = `-${scrollPosition}px`;
  },
  disable() {
    if (!body) {
      return;
    }

    body.classList.remove(DISABLE_SCROLLING_CLASS);
    body.style.removeProperty('top');

    window.scrollTo(0, scrollPosition);
  },
};

// */Modal.jsx

onOpen = () => { bodyScrollLock.enable(); }
onClose = () => { bodyScrollLock.disable(); }

相关问题