我有一个div,其中包含在组件的render方法上创建的元素列表。容器的样式为overflow: scroll
但滚动条除了最初可见的项目外没有显示任何其他内容。我想知道这种行为是否在反应中以及如何解决它。
<div style={{ margin: 15, marginLeft: 35 }}>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div style={{ marginRight: 10 }}>
Lorem Ipsum
</div>
<div style={{ display: 'block', maxWidth: 300, marginLeft: 20, overflow: 'scroll' }}>
<div> Item visible </div>
<div> Item visible </div>
<div> Item visible </div>
<div> Item visible </div>
<div> Item NOT visible </div>
<div> Item NOT visible </div>
<div> Item NOT visible </div>
<div> Item NOT visible </div>
<div> Item NOT visible </div>
<div> Item NOT visible </div>
<div> Item NOT visible </div>
<div> Item NOT visible </div>
</div>
</div>
</div>
答案 0 :(得分:2)
而不是使用overflow: 'scroll'
设置overflow: 'auto'
,如果您设置父height
的{{1}},则会发生事件。
检查此示例:
scroll bar
class App extends React.Component{
render(){
return(<div style={{ margin: 15, marginLeft: 35 }}>
<div style={{ display: 'flex', flexDirection: 'row' }}>
<div style={{ marginRight: 10 }}>
Lorem Ipsum
</div>
<div style={{overflow: 'auto', height: 'inherit', display: 'block', maxWidth: 300, marginLeft: 20,}}>
<div> Item visible</div>
<div> Item visible</div>
<div> Item visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
<div> Item NOT visible</div>
</div>
</div>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('app'))