如何在react-bootstrap模态框中添加滚动条？

Question

我正在使用 react-bootstrap modal。

如何让模态框中仅限body滚动而不是整个页面滚动？

  <Modal.Dialog>
    <Modal.Header>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>

    <Modal.Body>One fine body...</Modal.Body>

    <Modal.Footer>
      <Button>Close</Button>
      <Button bsStyle="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>

- Hemã Vidal

Answer 1

感谢Amit的回答。

只使用样式表的第一种解决方案如下：

  <Modal.Dialog>
    <Modal.Header>
      <Modal.Title>Modal title</Modal.Title>
    </Modal.Header>

    <Modal.Body style={{
      maxHeight: 'calc(100vh - 210px)',
      overflowY: 'auto'
     }}
    >
     One fine body...
    </Modal.Body>

    <Modal.Footer>
      <Button>Close</Button>
      <Button bsStyle="primary">Save changes</Button>
    </Modal.Footer>
  </Modal.Dialog>

使用 react-bootstrap 本身就有一种新的实现行为的方式:

<Modal
  scrollable={true}
  ....
>
  ....
</Modal>

模态框文档

- Hemã Vidal

---

React推荐将max-height改为maxHeight，将overflow-y改为overflowY。 - Borjovsky

我有一个按钮，在X轴上略微溢出，现在水平方向的溢出比例过大。overflowX: auto似乎无法缩小它。你会如何处理这个问题？ - as.beaulieu

如果 X 溢出，则可能会有某个子元素正在推动宽度。如果必要，您还可以设置 overflow-x: none。 - Hemã Vidal

我发现的最大问题是使用“-210px”会导致其高度根据屏幕大小而变化，这有点违背了Bootstrap响应式设计的初衷。 - Robby Hoover

Answer 2

你可以在 Modal 中添加 scrollable 属性：

<Modal scrollable={true}>
</Modal>

你可以从Modal文档中获取详细信息。

- Kavya

---

由于此帖已经接受了一个答案，最好直接添加评论或进行编辑。 - keikai

感谢提供文档参考。这可以在新版本中实现。它应该能够完成工作。 - Hemã Vidal