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

Tholle · Accepted Answer · 2019-03-20 20:05:01Z

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
  };
  
  componentDidMount() {
    window.addEventListener("scroll", this.onScroll);
  }
  
  componentWillUnmount() {
    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.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

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

Yeah, I found this code just now, the thing is that since the scrolling would be on the outer most container, once I do a scroll like this everything in the container going to re-render and it looks weird. I think this is one situation where I need to do outside of the rendering and just hide the component on scroll via dom.
@chobo2 Alright. So you mean that when the window is scrolling, something should be hidden?
Well when the div scrollbar is scrolling(not sure if that is different then window scrolling). Then something in that div should be hidden. I got a fixed vertial nav and header. To the right of the nav is where all the content is rendered and this div has a scrollbar on it.
I think I got your example working. I had to do a ref to my div. however same thing as soon as I change "isScrolling" state everythiing in that diff has a re-render (maybe I am doing something wrong over all). What I have done is removed your state check and did " document.getElementById('testa').style.display = "none";"

RileyManda · Accepted Answer · 2022-02-21 19:58:44Z

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

Collectives™ on Stack Overflow

Hide Element on Scrolling in Reactjs?

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related