我在 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)