如何在Reaction中向组件添加滚动条? [英] How to add a scroll bar to a component in React?
本文介绍了如何在Reaction中向组件添加滚动条?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的SPA中使用了一个有3列的网格系统。左侧和右侧列表包含占据视区高度的100%的组件。中间的一列包含一个很长的列表,并且希望在中间的组件上添加一个滚动条。我尝试用几个不同的滚动条组件来绘制中间组件,但都不起作用。我最后总是看到一个主页面滚动,当进一步向下滚动时,我只剩下列表组件,左侧和右侧组件保留在页面顶部。
推荐答案
尝试在中间组件添加overflow-y: scroll;
const items = [...Array(100)].map((val, i) => `Item ${i}`);
const App = () => (
<div className="container">
<div className="left-col">
Left col
</div>
<div className="center-col">
<span>List</span>
<ul>
{items.map((item, i) => (<li key={`item_${i}`}>{ item }</li>))}
</ul>
</div>
<div className="right-col">
Right col
</div>
</div>
);
ReactDOM.render(<App />, document.getElementById('react'));
.container {
display: flex;
flex-direction: row;
height: 100vh;
}
.left-col {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: #ddd;
}
.center-col {
flex: 1;
background: #aaa;
overflow-y: scroll;
}
.right-col {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background: #e7e7e7;
}
<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>
<div id="react"></div>
这篇关于如何在Reaction中向组件添加滚动条?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文