условный scrollIntoView в зависимости от положения экрана

Question

Я бы хотел прокрутить до MessageCell при двух условиях.Если это новое сообщение, заполненное через Redux, и пользователь не прокрутил слишком далеко старые сообщения (новое сообщение находится на расстоянии x пикселей от отображаемой части представления прокрутки.

При моей текущей настройкепредставление прокрутки автоматически прокручивается каждый раз, когда приходит сообщение.

Обновление: У меня нет проблем с моей текущей базой кода (если вы видите проблему с моим текущим подходом, не стесняйтесь указывать на нее) Что я ищу, так это план атаки. Я немного озадачен тем, как подойти к этой проблеме.

class scrollView extends Component {
    constructor(props) {
        super(props);
        this.setScrollSectionRef = this.setScrollSectionRef.bind(this);
        this.state = {
            scrollSection: null,
        };
    }
    setScrollSectionRef(node) {
        const { scrollSection } = this.state;
        this.scrollSection = node;
        // this is to force a re-render of messages
        // for them to recive the scrollSectionRef
        if (!scrollSection) {
            this.setState({ scrollSection: this.scrollSection });
        }
    }
    render() {
        return (
            <section ref={this.setScrollSectionRef} className="threadMessageListContainer">
                <ul className="threadMessageList">
                    {
                        this.props.data.map((data) =>
                            <MessageCell
                                key={data.id}
                                scrollSection={scrollSection}
                            />
                        )
                    }
                </ul>
            </section>
        )
    }
}

class MessageCell extends Component {
    constructor(props) {
        super(props);
        this.setLIref = this.setLIref.bind(this);
    }
    componentDidMount() {
        // Auto scroll window to bottom of scrollView feed
        if (this.liRef) {
            this.liRef.scrollIntoView();
        }
    }
    setLIref(node) {
        this.liRef = node;
    }
    render() {
        return (
            <li
                ref={this.setLIref}
                className={cellClasses}
            >
                some displayed data
            </li>
        )
    }
}