A mixin to lock the scrolling of a component's parents for react

react-scroll-lock-mixin.js

// Based on https://codepen.io/somethingkindawierd/post/react-mixin-scroll-lock
// How this works is that it will lock the scroll of the component parents
// and allow the current element to scroll

import ReactDOM from "react-dom";

const ScrollLockMixin = {
  scrollLock: function (scrollElement) {
    let p;
    this.scrollElement = scrollElement || ReactDOM.findDOMNode(this);
    this.scrollElementParents = [];

    p = this.scrollElement.parentNode;

    while (p) {
      this.scrollElementParents.push(p);
      p = p.parentNode;
    }

    this.onScrollHandler = this.onScrollHandler.bind(this);
    this.scrollElement.addEventListener("wheel", this.onScrollHandler, false);
  },

  scrollRelease: function (scrollElement) {
    scrollElement = scrollElement || this.scrollElement;
    scrollElement.removeEventListener("wheel", this.onScrollHandler, false);
  },

  onScrollHandler: function () {
    if (!this.scrollParentDefault) {
      this.scrollParentDefault = this.scrollElementParents.map(element =>
        element.scrollTop
      );
    }

    this.scrollElementParents.forEach((parent, i) => {
      setTimeout(() => {
        parent.scrollTop = this.scrollParentDefault[i];
      });
    });
  }
};

export default ScrollLockMixin;