这只是基本示例，尽管有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>此问题的解决方案是创建自定义Dropdown组件，该组件在Portal 中在您不想显示滚动的元素范围之外呈现其菜单。您可以将菜单position:absolute设置为并根据Dropdown位置设置其绝对位置。
您可以Dropdown使用getBoundingClientRect获取位置
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句