ContinousScroll.js

import React, { Component } from 'react';

import 'intersection-observer'; // optional polyfill
import Observer from '@researchgate/react-intersection-observer';
import ReactResizeDetector from 'react-resize-detector';
import './styles.scss';

let data = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
let heights = [184,58,96,144,68,98,150,200,240];

const SPEED = 5.91;


export class Intersection extends Component {
  constructor(props) {
    super(props);
    this.myRef1 = React.createRef();
    this.myRef2 = React.createRef();
    this.state = {showOne: true, showTwo: false, heights, heightOne: 0, heightTwo:0};
  }

  // randomHeight = () => {
  //   let rand = Math.random()*150;
  //   console.log(rand);
  //   if(rand < 10) {
  //     return `100px`
  //   }
  //   return `${rand}px`
  // }

  onResize = (w, h, ref) => {
    if(ref.current['id'] === 'one') {
      this.setState({heightOne: h});
    }
    if(ref.current['id'] === 'two') {
      this.setState({heightTwo: h});
    }
  }

  animation = (refId) => {
    if(refId === 'one') {
      let time = this.state.heightOne/SPEED;
      return {animation: `scroll ${time}s linear`}
    }
    if(refId === 'two') {
      let time = this.state.heightTwo/SPEED;
      return {animation: `scroll ${time}s linear`}
    }
  }

  manageRef = (currentRefId, ratio) => {
    if(currentRefId === 'one') {
      if(this.state.showOne) {
        if(ratio > 0 && ratio < 0.2 && this.state.oneInView) {
          // div in exit
          this.setState({showTwo: true, showOne: false, oneInView: false});
        }
        if(ratio > 0.8 && ratio <1.1) {
          // div in full view
          this.setState({showTwo: true, showOne: true, oneInView: true});
        }
      }
    }
    if(currentRefId === 'two') {
      if(this.state.showTwo) {
        if(ratio > 0 && ratio < 0.2 && this.state.twoInView) {
          // div in exit
          this.setState({showTwo: false, showOne: true, twoInView: false});
        }
        if(ratio > 0.8 && ratio <1.1) {
          // div in full view
          this.setState({showTwo: true, showOne: true, twoInView: true});
        }
      }
    }
  }

  handleChange = (e, x, ref) => {
    // console.log('current_node', y.current['id'], e.intersectionRatio);
    this.manageRef(ref.current['id'], e.intersectionRatio)
  }

  render() {
    let styleOne = this.animation('one');
    let styleTwo = this.animation('two');
    return (
      <div className='parent' style={{height: '100vh', overflow: 'scroll', border: '5px solid goldenrod', }}>
        <div id='one' className={`one ${this.state.showOne? '': 'hide'}`} ref={this.myRef1} style={this.state.showOne ? styleOne: {}}>
          Div One
          <ReactResizeDetector handleWidth={false} handleHeight={true} onResize={(w,h)=>this.onResize(w,h,this.myRef1)} />
          {data.map((e,i) => <Content key= {e} height={this.state.heights[i]} data={e} />)}
          <Observer onChange={(e, x, y) => this.handleChange(e, x, this.myRef1)} triggerOnce={false} threshold={[0.1, 1.0, 0.1, 1.0]}>
            <div><Content height={100} data={'Call to action card'} /></div>
          </Observer>
        </div>
        <div id='two' className={`two ${this.state.showTwo? '': 'hide'}`} ref={this.myRef2} style={this.state.showTwo? styleTwo: {}}>
          Div Two
          <ReactResizeDetector handleWidth={false} handleHeight={true} onResize={(w, h) => this.onResize(w, h, this.myRef2)} />
          {data.map((e,i) => <Content key= {e} height={this.state.heights[i]} data={e} />)}
          <Observer onChange={(e, x, y) => this.handleChange(e, x, this.myRef2)} triggerOnce={false} threshold={[0.1, 1.0, 0.1, 1.0]}>
            <div><Content height={100} data={'Call to action card'} /></div>
          </Observer>
        </div>
      </div>
    )
  }
}

const Content = (props) => {
  return (
    <div className='boxparent' style={{border: '2px solid salmon', width: '100px', height: `${props.height}px`}}>
    <div className='box'>{props.data}</div>
    </div>
  )
}