React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by kpulkit29

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.vlist {
  overflow-y: scroll;
  width: 400px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

Babel + JSX

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	itemHeight: 100,
      windowHeight: 200,
      innerHeight: 1000,
      scrollTop: 0
    }
  }
  
  scrollHandler(e) {
  		this.setState({
      	...this.state,
        scrollTop: e.target.scrollTop
      });
  }
  
  generateRows() {
  	let items = [1,2,3,4,5,6,7,8,9];
    let s = Math.floor(this.state.scrollTop/this.state.itemHeight);
    let e = Math.min(items.length,
    	s+Math.ceil((this.state.windowHeight/this.state.itemHeight)));
    let itemsToReturn = [];
    console.log(s,e, this.state.scrollTop);
    for(let i=s;i<=e;i++) {
    	itemsToReturn.push({
      	top: '' + i*this.state.itemHeight + 'px',
        position: 'absolute',
        left: '0px',
        width: '100%'
      });
    }
    
    return itemsToReturn;
  }
  
  render() {
    return (
      <div className="vlist" onScroll={this.scrollHandler.bind(this)}>
          {
          this.generateRows().map((item, index) => {
          		return <div style={item}>{index} Item</div>;
          })
          }
      </div>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);