如何移除Ant Design框架下Modal组件的滚动条？

如果要移除的是Modal内容区域的滚动条，有两种常用实现方案：

方案1：直接通过Modal内置props实现（最简便） #

Ant Design Modal组件提供了bodyStyle属性用来自定义内容区域的样式，直接给Modal添加该属性即可，修改后的代码如下：

<Modal
  className='sample'
  visible={sample}
  destroyOnClose={true}
  // 新增该行配置
  bodyStyle={{ overflow: 'hidden' }}
  footer={
    <div className="div-button-save">
      <Button type="default" onClick={() => toggleDialog()}>
        <IntlMessages id="Portal.dialog.button.Cancel" />
      </Button>
      <Button type="primary" onClick={() => handleSave()}>
        <span><IntlMessages id="Portal.dialog.button.Submit" /></span>
      </Button>
    </div>
  }
  maskClosable={false}
  centered>
  {/* 原有Modal内容 */}
</Modal>

如果是内容过长被截断，不需要限制内容区域最大高度，可以改成bodyStyle={{ overflow: 'hidden', maxHeight: 'unset' }}。

方案2：通过自定义CSS覆盖默认样式 #

你已经给Modal添加了自定义类名sample，直接在全局样式或者对应模块的样式文件中添加以下代码即可：

/* 隐藏内容区域滚动条 */
.sample .ant-modal-body {
  overflow: hidden !important;
  /* 不需要限制最大高度就加下一行 */
  /* max-height: unset !important; */
}

/* 兼容不同浏览器的滚动条隐藏 */
.sample .ant-modal-body::-webkit-scrollbar {
  display: none;
}
.sample .ant-modal-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

如果是需要移除Modal弹出时页面背景的滚动条，Ant Design默认会在Modal显示时给body添加overflow: hidden属性，如果没有生效可以检查全局样式是否有冲突，也可以在Modal显示/隐藏的回调里手动给body设置对应样式。

内容的提问来源于stack exchange，提问作者Mark Lopez