Hide Element on Scrolling in Reactjs?

Question

I have a div that has scrolling enabled for that div. I have some elements in it, when the user starts to scroll I want an element to disappear and when scrolling stops I want it to show up again.

How can I do this

<div className="container"/> 
    <div>Hide me on scrolling</div>
    <div>Always show </div>
</div>

.container{
    flex: 1 1 80%;
    display: flex;
    flex-wrap: wrap;
    width: calc(100vw - 110px);
    height: calc(100vh - 75px);
    overflow-y: auto;
    min-width: 500px;
    display: flex;
    justify-content: center;
    z-index: 1;
}

Answer 1

A different approach:

import React,{ Component } from 'react';
    class ScrollHide extends Component {
    
      constructor(props) {
        super(props);
       this.state = {
        opacity: '1'
      }
    }
    
    
      componentDidMount() {
        if (typeof window !== "undefined") {
          window.onscroll = () => {
            const currentScrollPos = window.pageYOffset;
            const maxScroll = document.body.scrollHeight - window.innerHeight;
            // console.log(maxScroll)
            if (currentScrollPos > 0 && currentScrollPos < maxScroll) {
              this.setState({ opacity: "0" })
              // console.log(currentScrollPos)
            } else {
              this.setState({ opacity: "1" })
            }
          }
        }
      }
    
      render() {
        return (
            <>
            <div  style={{ opacity: `${this.state.opacity}`}} >
             {/* additonal content */}TestView
            </div>
    
    
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec felis eu nisl varius gravida eget nec libero. Nulla tristique varius semper. Pellentesque euismod, justo eu rutrum congue, turpis libero placerat lorem, vel accumsan felis enim et enim. Nunc facilisis lectus ac mi iaculis imperdiet. ....add more content here...
    
    </div>
    </>
        )
      }
    }
    
    export default ScrollHide