解决ant-design Select、TimePicker等组件在非body出现滚动条时，滚动时位置bug

问题描述

在使用antd插件的，Select、TimePicker等组件时，我们把这些组件放置到某节点，并且这个节点存在滚动条时，当这个节点滚动时，弹出的option层、日历选择层等停留在原有位置，不跟随滚动。比如将这类控件放到Modal里、放到Table里等（放入的这些控件自己设置了overflow:auto）。

可以看到在Modal框中放入Select选择框、DatePicker控件，并且当页面有滚动时，Option层及日历选择层并没有随着页面的滚动而滚动。

如下可实际操作

See the Pen
基本 - Ant Design Demo by Wayne (@aiheguozhi)
on CodePen.

原因

弹出层放到了和初始节点不同的节点中，这样导致了弹出层是相对与父节点或者body进行绝对定位，但是当初始节点在一个带滚动的节点时，当用户使用鼠标上下滚动时，会造成弹出层（option层或者日期选择层）不会随着浏览器的滚动而滚动。

解决办法

将弹出的层放到了和初始展示节点放到同一个父节点中，弹出层相对于这个父节点进行绝对定位。

根据Antd的API做一下绝对定位即可，Select对应的属性是getPopupContainerDatePicker对应的属性为getCalendarContainer

代码如下：

const { Modal, Button, Select,DatePicker } = antd;

class App extends React.Component {
  state = { visible: false }

  showModal = () => {
    this.setState({
      visible: true,
    });
  }

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }

  render() {
    const { Option } = Select;
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div style={{ position: 'relative' }} id="modalArea">
            <Select
              placeholder="请选择" 
              style={{width: '100px'}}
              getPopupContainer={() => document.getElementById('modalArea')}
             >
              <Option value={1}>1</Option>
              <Option value={2}>2</Option>
            </Select>
            <br />
            <br />
            <DatePicker
              getCalendarContainer={() => document.getElementById('modalArea')}
            />
          </div>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

See the Pen
ant design modal 固定浮层 by wayne (@aiheguozhi)
on CodePen.

参考链接：Antd Select