Question

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

有什么问题？

提前谢谢。

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

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中呈现其菜单。您可以将菜单设置为{ {1}}并根据position:absolute位置设置其绝对位置。

您可以使用getBoundingClientRect

获得Dropdown职位

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

2 个答案: