javascript - How to set modal scroll to top when it appears in React.js - Stack Overflow

admin管理员组

文章数量:1023867

I made a modal windows using react-bootstrap-sweetalert lib. It contains long list of contents, so I allowed overflow:scroll. What the problem is, when modal open, it doesn't scroll to top. And scroll to unknown position, so I need to scroll to top manually.

This is simple code

basicAlert = () => {
   this.setState({
        alert: (
          <div>
           // long list table
          </div>)
   });
}
hideAlert = () => {
   this.setState({
      alert: null
   });
}
render() {
   return (
     {this.state.alert}
     // rest contents ...
   )
}

Any advice will be big help for me. Thanks

I made a modal windows using react-bootstrap-sweetalert lib. It contains long list of contents, so I allowed overflow:scroll. What the problem is, when modal open, it doesn't scroll to top. And scroll to unknown position, so I need to scroll to top manually.

This is simple code

basicAlert = () => {
   this.setState({
        alert: (
          <div>
           // long list table
          </div>)
   });
}
hideAlert = () => {
   this.setState({
      alert: null
   });
}
render() {
   return (
     {this.state.alert}
     // rest contents ...
   )
}

Any advice will be big help for me. Thanks

• javascript
• reactjs
• scroll
• modal-dialog

Share Improve this question Follow asked Sep 7, 2018 at 4:33 Nomura NoriNomura Nori 5,19799 gold badges5656 silver badges9191 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You could create a ref to an element in your ponent that wraps the scrollable content, and then use this ref to set scrollTop to 0 of the corresponding DOM element, when content is displayed in your modal.

So for instance, the following additions/adjustments to your ponent should achieve what you need:

// Add a constructor to create the ref
constructor(props) {
  super(props)
  // Add a ponent ref to your ponent. You'll use this to set scroll 
  // position of div wrapping content
  this.ponentRef = React.createRef();

}

basicAlert = () => {
  this.setState({
    alert: (
      <div>
      // long list table
      </div>)
     }, () => {

      // After state has been updated, set scroll position of wrapped div
      // to scroll to top
      this.ponentRef.current.scrollTop = 0;
    });
}

render() {

  // Register your ref with wrapper div
  return (<div ref={ this.ponentRef }>
    { this.state.alert }
    // rest contents ...
    </div>)
}

I made a modal windows using react-bootstrap-sweetalert lib. It contains long list of contents, so I allowed overflow:scroll. What the problem is, when modal open, it doesn't scroll to top. And scroll to unknown position, so I need to scroll to top manually.

This is simple code

basicAlert = () => {
   this.setState({
        alert: (
          <div>
           // long list table
          </div>)
   });
}
hideAlert = () => {
   this.setState({
      alert: null
   });
}
render() {
   return (
     {this.state.alert}
     // rest contents ...
   )
}

Any advice will be big help for me. Thanks

I made a modal windows using react-bootstrap-sweetalert lib. It contains long list of contents, so I allowed overflow:scroll. What the problem is, when modal open, it doesn't scroll to top. And scroll to unknown position, so I need to scroll to top manually.

This is simple code

basicAlert = () => {
   this.setState({
        alert: (
          <div>
           // long list table
          </div>)
   });
}
hideAlert = () => {
   this.setState({
      alert: null
   });
}
render() {
   return (
     {this.state.alert}
     // rest contents ...
   )
}

Any advice will be big help for me. Thanks

• javascript
• reactjs
• scroll
• modal-dialog

Share Improve this question Follow asked Sep 7, 2018 at 4:33 Nomura NoriNomura Nori 5,19799 gold badges5656 silver badges9191 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

You could create a ref to an element in your ponent that wraps the scrollable content, and then use this ref to set scrollTop to 0 of the corresponding DOM element, when content is displayed in your modal.

So for instance, the following additions/adjustments to your ponent should achieve what you need:

// Add a constructor to create the ref
constructor(props) {
  super(props)
  // Add a ponent ref to your ponent. You'll use this to set scroll 
  // position of div wrapping content
  this.ponentRef = React.createRef();

}

basicAlert = () => {
  this.setState({
    alert: (
      <div>
      // long list table
      </div>)
     }, () => {

      // After state has been updated, set scroll position of wrapped div
      // to scroll to top
      this.ponentRef.current.scrollTop = 0;
    });
}

render() {

  // Register your ref with wrapper div
  return (<div ref={ this.ponentRef }>
    { this.state.alert }
    // rest contents ...
    </div>)
}

本文标签： javascriptHow to set modal scroll to top when it appears in ReactjsStack Overflow