React Modal Resets Scrollbar on Opening Modal

时间:2018-03-25 20:57:52

标签: javascript reactjs modal-dialog frontend react-modal

Right now whenever my modal closes, it scrolls all the way left and does not return to the original div that called it. Ive tried every api callback and every react lifecycle method, and nothing works. However, if i use scrollIntoView in the terminal, it works just fine.

Steps to Reproduce: 1. Go to http://www.arabisraeliconflictmadesimple.com/timeline 2. press options, UN 3. scroll right to 1967 4. press on "UN security resolution 242" 5. Notice that we are back to 1947

Here's my component that calls the modals ```

import React, {Component} from 'react'
import $ from 'jquery'
import Modal from 'react-responsive-modal'

class InfoSquare extends Component {
    constructor(props) {
        super(props)
        this.state = {
            open: false,
          };
    }

    onOpenModal() {
        if (this.props.modal_info)
            this.setState({ open: true });
    }

    scrollBack() {
        let to_return = document.getElementById(`${this.props.year}`)
        to_return.scrollIntoView();
    }

    onCloseModal() {
        this.setState({ open: false });
    }

    render(props) {
        const { open } = this.state;
        return (
            <div>
                <p className={`${this.props.indicator}-text`} onClick={this.onOpenModal.bind(this)} >{this.props.text}</p>              
                <Modal open={open} onClose={this.onCloseModal.bind(this)} onAfterOpen={this.scrollBack} little>
                    <h4>{this.props.text}</h4>
                    {this.props.modal_info && 
                        this.props.modal_info.map(info => <p key={info}>{info}</p>)
                    }
                </Modal>
            </div>
        );
    }
}

export default InfoSquare;

```

0 个答案:

没有答案