如何删除由打开的下拉菜单创建的垂直滚动

Question

尽管overflow-y:visible属性，它只是基本的例子如何出现垂直滚动。我有一个表，我想在大数据集的情况下水平滚动。水平滚动应该动态所以我设置overflow-x:auto但这破坏了打开一个行为下拉菜单，创建垂直滚动。

怎么了？

先感谢您。

class Example extends React.Component {

  constructor(props){
    super(props)
  }
  
  render(){
  
    return (
      <ReactBootstrap.DropdownButton
        title='test'
        id='1'
      >
        <ReactBootstrap.MenuItem eventKey="1">Action</ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem eventKey="2">Another action</ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem eventKey="3" active>
          Active Item
        </ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem divider />
        <ReactBootstrap.MenuItem eventKey="4">Separated link</ReactBootstrap.MenuItem>
      </ReactBootstrap.DropdownButton>
    )
  
  }

}

ReactDOM.render(<Example />, document.getElementById('container'))

#container {

  height:50px;
  overflow-y:visible;
  overflow-x:auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="container">
  
</div>

Answer 1

这是因为你overflow-x值，如果你删除它并设置overflow: hidden;它工作正常：

class Example extends React.Component {

  constructor(props){
    super(props)
  }
  
  render(){
  
    return (
      <ReactBootstrap.DropdownButton
        title='test'
        id='1'
      >
        <ReactBootstrap.MenuItem eventKey="1">Action</ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem eventKey="2">Another action</ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem eventKey="3" active>
          Active Item
        </ReactBootstrap.MenuItem>
        <ReactBootstrap.MenuItem divider />
        <ReactBootstrap.MenuItem eventKey="4">Separated link</ReactBootstrap.MenuItem>
      </ReactBootstrap.DropdownButton>
    )
  
  }

}

ReactDOM.render(<Example />, document.getElementById('container'))

#container {

  height:50px;
  overflow: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="container">
  
</div>

Answer 2

这个问题的解决方案是创建自定义Dropdown组件，在Portal中将其菜单呈现在元素范围之外，您不想显示滚动。您可以将菜单设置为position:absolute并根据Dropdown位置设置其绝对位置。

你可以使用Dropdown获得getBoundingClientRect位置