index.js

import React, { Component } from 'react';
import ReactDom from "react-dom";

import './overlay.scss'

const root = document.body || document.documentElement

const events = ['touchmove', 'mousewheel']

class Overlay extends Component {
    constructor(props) {
        super(props);
        this.overlayBox = null
    }

    preventScroll = e => {
        e.preventDefault()
    }

    componentDidMount() {
        events.forEach(item => {
            this.overlayBox.addEventListener(item, this.preventScroll, {
                passive: false
            })
        })
    }

    componentWillUnmount() {
        events.forEach(item => {
            this.overlayBox.removeEventListener(item, this.preventScroll)
        })
    }

    render() {
        return ReactDom.createPortal(
            (<div className={'overlay'}
                  ref={el => this.overlayBox = el}
                  style={{top: `${window.scrollY}px`}}
            >{this.props.children}</div>),
            root
        )
    }
}

export default Overlay;