CODEWITHSUNDEEP
reactjstypescriptreact-hooks
GoranR
GoranR

Reputation: 97

How can I make auto-scroll to div, when div is visible in React?

So, I have one problem with auto-scroll in React, I need to add auto-scroll when my message is visible, a message comes to the top of the page after when the user has submitted his own data and if everything is good. Then he needs to be moved on top of the page, of course, using auto-scroll.

const valMessageRef = useRef<HTMLDivElement | null>(null);
const errorLabelRef = () => scrollToRef(validationMessageRef);

const scrollToRef = (ref: RefObject<HTMLDivElement>) => {
    if (ref.current) {
      window.scrollTo(0, ref.current.offsetTop);
    }
  };


  useEffect(() => {
    errorLabelRef();
  }, [validationMessageRef.current]);


return (
    <div className="w-100">
{screenType === "success" && (
        <div className="ew-form-group_message" ref={validationMessageRef}>
          <p className="ew-form-group__val__messages">
            <span className="ew-form-group__val__message">{translation.messages.SUCCESS}</span>
          </p>
        </div>
      )}
</div>
....

Upvotes: 0

Views: 74

Answers (1)

vtolentino
vtolentino

Reputation: 784

I created a small JSFiddle:

https://jsfiddle.net/z64yetpa/5/

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        showMessage: false
    }

    this.handleSend = this.handleSend.bind(this);
  }

  scrollTo() {
        window.scrollTo({ left: 0, top: this.myRef.current.offsetTop, behavior: 'smooth' })

    }

    componentDidMount(){
    this.myRef = React.createRef()
    }

    handleSend(){
     this.setState({showMessage:true}, () => this.scrollTo());
    }

  render() {
  const {showMessage} = this.state;
    return (
      <div className="parent">
      {showMessage &&  
      <div className="upper" ref={this.myRef}>
        Hello, scroll to me automatically
      </div>
      }
      <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
      <button onClick={this.handleSend}>Send</button>

      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

On Click, you are redirected to the top.

Upvotes: 1

Related Questions