在React Js中阻止内部元素滚动时防止父元素的自定义滚动

Question

我是React Js的新手，到目前为止，我制作了这个组件并尝试制作自定义滚动条。 （用于练习并使用create-react-app创建该项目）

然后我发现了一个问题，当我滚动外部组件并到达内部组件时，两个区域一起滚动。 我需要告诉组件以防止滚动外部滚动条，直到内部滚动条滚动到底部为止。

/* ======================== APP JS ==========================*/
import React, { Component } from 'react';
import ScrollBar from './components/scrollBar';
import './App.css';

class App extends Component {

  render() {
    return (
      <div className="App">

        <div className="box" >
          <ScrollBar>

            <p> lorem ipsum kdfnvfdkvndfvkdjfnvdkfjvndkjvsnvk sjbdkjfghbd hjbfg kjhbdg  </p>
            <p> lorem ipsum kdfnvfdkvndfvkdjfnvdkfjvndkjvsnvk sjbdkjfghbd hjbfg kjhbdg  </p>
            <p> lorem ipsum kdfnvfdkvndfvkdjfnvdkfjvndkjvsnvk sjbdkjfghbd hjbfg kjhbdg  </p>

            <ScrollBar>

<p> lorem ipsum kdfnvfdkvndfvkdjfnvdkfjvndkjvsnvk sjbdkjfghbd hjbfg kjhbdg  </p>
            <p> lorem ipsum kdfnvfdkvndfvkdjfnvdkfjvndkjvsnvk sjbdkjfghbd hjbfg kjhbdg  </p>
            <p> lorem ipsum kdfnvfdkvndfvkdjfnvdkfjvndkjvsnvk sjbdkjfghbd hjbfg kjhbdg  </p>

</ScrollBar>
            <p> lorem ipsum kdfnvfdkvndfvkdjfnvdkfjvndkjvsnvk sjbdkjfghbd hjbfg kjhbdg  </p>

          <ScrollBar/>
          
        </div>

      </div>
    );
  }
}

export default App;
/* ======================== SCROLLBAR COMPONENT ==========================*/
import React, { Component } from 'react';
import './style/scrollbar.min.css';

class ScrollBar extends Component {

    constructor(){
        super()

        this.wheel = { x:0, y:0 }
        this.scrollWrapper = React.createRef();
        this.handleWheel = this.handleWheel.bind(this);
        this.handleScroll = this.handleScroll.bind(this);
    }

    state = {
        scrollTop: 0,
        scrollBarTop:0,
        scrollThumb:10,
    }

    componentDidMount() {
        this.Wrapper = this.scrollWrapper.current;
        this.Child = this.scrollWrapper.current.children[0];
        let scrollThumb = this.Wrapper.clientHeight * (this.Wrapper.clientHeight / this.Child.clientHeight)
        this.setState({scrollThumb});
    }

    handleWheel (e) {
        let dir = (e.deltaY < 0) ? "up" : "down";
        this.handleScroll(dir);
    }

    handleScroll(direction) {
        
        // console.log(direction);
        this.scrolling = true;
        let top = this.state.scrollTop;

        if ( direction === 'down' ) {
            top += 10;
        } else {
            top -= 10;
        }

        if ( top < 0 ) {
            top = 0;
        }

        if ( top > this.Child.clientHeight - this.Wrapper.clientHeight ) {
            top = this.Child.clientHeight - this.Wrapper.clientHeight;
        }
        
        let scrollBarTop = ( top / this.Child.clientHeight) * this.Wrapper.clientHeight;
        this.setState({scrollTop:top,scrollBarTop});
    }

    render() { 
        return (
            <div className="scroll-wrapper" onWheel={this.handleWheel} ref={this.scrollWrapper}>
                <div className="scrolling-section" style={{top: -this.state.scrollTop}}>
                    {this.props.children}
                </div>
                <div className="scroll-bar">
                    <div className="scroll-thumb" style={{top: this.state.scrollBarTop ,height:this.state.scrollThumb}}></div>
                </div>
            </div>
        );
    }
}
 
export default ScrollBar;

$scrollBar-width:10px;
.scroll-wrapper {

    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    background-color: #eaeaea;
    padding-right: $scrollBar-width;
    box-sizing: border-box;
    overflow: hidden;

    div.scrolling-section {
        
        width: calc(100% - 10px);
        display: block;
        position: absolute;
        background: #ffffff;
        top: 0;
        left: 0;
    }

    div.scroll-bar {

        top: 0;
        right: 0;
        height: 100%;
        position: absolute;
        width: $scrollBar-width;
        background: hsla(0,0%,0%,.3);

        div.scroll-thumb {

            top: 0;
            right: 0;
            height: 20px;
            position: absolute;
            width: $scrollBar-width;
            background-color: hsla(0,0%,0%,.7);
        }
    }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>