javascript - 如何将滚动添加到 react-bootstrap Modal.Body

Question

我正在使用 react-bootstrap modal .

如何只滚动正文而不滚动整个页面？

  <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>

Answer 1

感谢Amit answer .

第一个仅使用样式的解决方案如下:

  <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>

Modal Documentation