JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

#a {
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  background: #d35ec2;
}

#b {
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  background: #5d9ed2;
}

Babel + JSX

const onWheelHandler = (type, forwardTo) => event => {
  // This wil cause trouble!
  const newEvent = new event.constructor(event.type, event);
  if (forwardTo) forwardTo().dispatchEvent(newEvent);
  console.log(type, 'is scrolled');
};

class RootComponent extends React.Component {
  constructor(props) {
    super(props);
    this.elements = {};
  }
  
  getElement(name) {
    return () => this.elements[name];
  }
  
  render() {
    return (
    	<div>
    		<div
          ref={(ref) => this.elements['A'] = ref}
          id="a"
          onWheel={onWheelHandler('A', this.getElement('B'))}
        >
          A
        </div>
        <div
          ref={(ref) => this.elements['B'] = ref}
          id="b"
          onWheel={onWheelHandler('B')}
        >
          B
        </div>
      </div>
    );
  }
}

ReactDOM.render(<RootComponent />, document.querySelector('#root'));