React Wrapper Component to disable scroll on child -no modern IE :(

NoBackgroundScroll.js

import React, {Component} from 'react'
import $ from 'jquery'

export class NoBackgroundScroll extends Component {
  componentDidMount() {
    stopBackgrounScrollForEl(this.childElement);
  }
  componentWillUnmount() {
    cleanupStopBackgroundScrollForEl(this.childElement);
  }
  render() {
    const self = this;
    return React.cloneElement(this.props.children, {
      ref(el) {
        if (self.props.children.ref) self.props.children.ref(el);
        self.childElement = el;
      },
      style: Object.assign({}, this.props.children.style || {}, {msScrollSnapType: 'none'})
    });
  }

}

export function stopBackgrounScrollForEl(el) {
  // http://stackoverflow.com/questions/19817899/jquery-or-javascript-how-to-disable-window-scroll-without-overflowhidden
  $(el).on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.innerHeight(),
        delta = ev.originalEvent.wheelDelta,
        up = delta > 0;

    var prevent = function() {
      ev.stopPropagation();
      ev.preventDefault();
      ev.returnValue = false;
      return false;
    };

    if (!up && -delta > scrollHeight - height - scrollTop) {
      // Scrolling down, but this will take us past the bottom.
      $this.scrollTop(scrollHeight);
      return prevent();
    } else if (up && delta > scrollTop) {
      // Scrolling up, but this will take us past the top.
      $this.scrollTop(0);
      return prevent();
    }
  });
}

export function cleanupStopBackgroundScrollForEl(el) {
  $(el).off('DOMMouseScroll mousewheel');
}