Question

我正在使用SPA中有3列的网格系统。左侧和右侧列表包含占据视口高度100的组件。中间列包含一个长列表，并希望仅向中间组件添加滚动条。我试图用几个不同的滚动条组件来绘制中间组件，但没有任何作用。我最终总是有一个主页面滚动，当我向下滚动时，左侧和右侧组件仍保留在页面顶部，只留下列表组件。

Answer 1

尝试在中间组件上添加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>

Answer 2

找到解决方案，需要将固定高度设置为左右组件并溢出：滚动到中间组件。

如何在React中向组件添加滚动条？

2 个答案: