React locking of body scroll for desktop and touch devices

ScrolllockComponent.jsx

import React from 'react';

const withScrolllock = (WrappedComponent) => {
  return class ScrolllockComponent extends React.Component {

    constructor(props) {
      super(props);
      this.y = null;
      this.ref = null;
    }

    lock = (ref) => {
      this.ref = ref;
      this._addListeners();
      document.body.classList.add('no-scroll');
    }

    unlock = (ref) => {
      this.ref = ref;
      this._removeListeners();
      document.body.classList.remove('no-scroll');
    }

    _addListeners = () => {
      this.ref.addEventListener('touchstart', this._handleTouchStart, false);
      this.ref.addEventListener('touchmove', this._handleTouchMove, false);
    }

    _handleTouchStart = (event) => {
      if (event.targetTouches.length === 1) {
        // detect single touch
        this.y = event.targetTouches[0].clientY;
      }
    }

    _handleTouchMove = (event) => {
      if (event.targetTouches.length === 1) {
        // detect single touch
        this.disableRubberBand(event);
      }
    }

    _removeListeners = () => {
      this.ref.removeEventListener('touchstart', this._handleTouchStart);
      this.ref.removeEventListener('touchmove', this._handleTouchMove);
    }

    disableRubberBand = (event) => {
      let clientY = event.targetTouches[0].clientY - this.y;

      if (this.ref.scrollTop === 0 && clientY > 0) {
        // element is at the top of its scroll
        event.preventDefault();
      }

      if (this.isOverlayTotallyScrolled() && clientY < 0) {
        //element is at the top of its scroll
        event.preventDefault();
      }
    }

    isOverlayTotallyScrolled = () => {
      return this.ref.scrollHeight - this.ref.scrollTop <= this.ref.clientHeight;
    }


    render() {
      return (<WrappedComponent {...this.props} lock={this.lock} unlock={this.unlock} />)
    }

  }
}

export { withScrolllock };