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;
}

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;
}

• javascript
• reactjs

2 Answers 2

There is not real scrolling state in the browser; the scrolling event occurs, and then it's done.

You could set a piece of state called e.g. isScrolling to true when the scrolling event occurs, and then set a timeout to set it back to false after the last time it was scrolled.

Example

class App extends React.Component {
  timeout = null;
  state = {
    isScrolling: false
  };
  
  ponentDidMount() {
    window.addEventListener("scroll", this.onScroll);
  }
  
  ponentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll);
  }

  onScroll = () => {
    this.setState({ isScrolling: true });

    clearTimeout(this.timeout);

    this.timeout = setTimeout(() => {
      this.setState({ isScrolling: false });
    }, 200);
  };

  render() {
    return (
      <div style={{ height: 5000, overflowY: "scroll" }}>
        <div style={{ paddingTop: 50 }}>
          {this.state.isScrolling ? "Hidden" : "Shown"}
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

A different approach:

import React,{ Component } from 'react';
    class ScrollHide extends Component {
    
      constructor(props) {
        super(props);
       this.state = {
        opacity: '1'
      }
    }
    
    
      ponentDidMount() {
        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