guiqui

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

guiqui

 scollPos(){
        let currentIndx=Math.trunc(this.refs.viewPort.scrollTop/this.props.itemheight)
        currentIndx=currentIndx-this.numVisibleItems>=data.length?currentIndx-this.numVisibleItems:currentIndx;
        if (currentIndx!==this.state.start){
            console.log("Redraw");
            this.setState(
                this.state={
                    start:currentIndx,
                    end:currentIndx+this.numVisibleItems>=data.length ? data.length-1:currentIndx+this.numVisibleItems
                }

guiqui

//Creating the data

const data = []
function createData(){
	for (let i=0;i<10000;i++){
  	data.push({name: `Row ${i}`});
  }
}
createData();

guiqui

viewPort {
  position: relative;
  width: 510px;
  height: 300px;
  border: solid 1px;
  overflow-y: scroll;
}

.itemContainer {
  position: absolute;

guiqui

class Item extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
        <div className="item" style={{top:this.props.top}}>
                {this.props.label}
        </div>)