时间戳

首页 > 解决方案 > 当 div 在 React 中可见时，如何自动滚动到 div？

reactjs - 当 div 在 React 中可见时，如何自动滚动到 div？

问题描述

所以，我在 React 中的自动滚动有一个问题，当我的消息可见时，我需要添加自动滚动，当用户提交自己的数据并且一切正常后，一条消息会出现在页面顶部。然后他需要在页面顶部移动，当然，使用自动滚动。

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>
....

标签： reactjstypescriptreact-hooks

解决方案

我创建了一个小的 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"))

单击时，您将被重定向到顶部。

推荐阅读