反应元素列表不滚动

Question

我有一个 div，其中包含在组件的渲染方法上创建的元素列表。容器的样式有 overflow: scroll 但是滚动除了最初可见的项目外没有显示任何其他内容。我想知道在 React 中是否会出现这种行为以及如何解决它。

<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>

Answer 1

而不是使用 overflow: 'scroll' 设置 overflow: 'auto'，如果您设置父实体 scroll bar 的 height 事件将会发生。

检查这个例子：

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'))

<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='app'/>

反应元素列表不滚动

React list of elements not scrolling

scroll

list

overflow

reactjs