React - scrolling to the bottom of a flex container without scrolling the whole page

Question

I'm using react and trying to build a facebook like chat - where the right column scrolls down and has a list of threads, and the middle column had the thread content and scrolls bottom up.

I have it all setup using flex, but am stuck on getting the middle column to scroll to the bottom by default (since I want to see the latest chat message). Here is the snippet for the actual container (I'm using React bootstrap):

 <Row  >
    <Col ref={ (node) => { this.cont = node }}>
                                {this._buildThread()};
   </Col>
</Row>

and here is the snippet for my ComponentDidMount:

componentDidMount() {
    MessageStore.addChangeListener(this._onChange);
    MessageService.getThread(this.props.id, 1000, 1, false);

    this.cont.scrollTop = this.cont.scrollHeight;

}

Where cont is the ref for the container div that holds my messages. Yet nothing happens - it doesn't scroll, and if I look at node.scrollTop after setting it, it remains at 0 - seems immutable. Any help would be much appreciated. Thanks!

waterproof · Accepted Answer · 2017-04-26T02:51:45.823

3

Not sure about the details of your CSS, but I just had a similar-looking issue. The solution in my case was to make sure that the element itself would scroll and not its container:

.containerIWantToScroll {
    overflow-y: auto;
}

If the element's container expands to fit the element, then that element will not scroll, thus its scrollTop value is always zero.

edited Apr 26 '17 at 02:51

answered Apr 25 '17 at 23:29

waterproof

4,943
5
30
28

Great! Upvote my answer and mark it as correct, then? – waterproof Apr 26 '17 at 16:44
I tried - I'm new to SO and don't have enough reputation yet for it to be recorded. When I do I'll come back and do it again. Thank you. – Phoenix20 Apr 27 '17 at 17:50

Donald · Answer 2 · 2017-03-09T05:07:37.447

0

When are you triggering the code you included? To scroll to the bottom on render, I would write something like the following, calling triggerScroll in componentDidMount:

class App extends React.Component {
    componentDidMount () {
        this.triggerScroll();
    }

    triggerScroll () {
        this.cont.scrollTop = this.cont.scrollHeight;
    }

    render () {
        return (
            <div>
                <div className='containerIWantToScroll' ref={ (node) => { this.cont = node } }>
                    Content
                </div>
            </div>
        )
    }
}

edited Mar 09 '17 at 05:07

answered Mar 09 '17 at 04:57

Donald

1,120
12
21

I'm doing it in ComponentDidMount. I have the code I listed above at the end of that method, and the ref is defined as `ref='cont'`. If I output the value of node.scrollHeight it gives a value that seems correct, but node.scrollTop remains at 0 even with the assignment. Interestingly if I change it to use your syntax, I now get undefined for `this.cont.scrollHeight` (but `this.cont` is defined and is the proper object) – Phoenix20 Mar 09 '17 at 06:00
I just edited my question above to reflect the changes you suggested and show the two relevant pieces of code. – Phoenix20 Mar 09 '17 at 06:10
Hmm, that's strange `scrollHeight` was undefined when using my syntax. Based on this question (http://stackoverflow.com/questions/37620694/how-to-scroll-to-bottom-in-react), what if you put the ref on the most recent message, and used `.scrollIntoView()` on it? – Donald Mar 09 '17 at 15:15
I tried that. The problem is that scrollIntoView makes the entire page scroll and causes a jittery effect in the left hand column as well - it doesn't seem contained to the container for the messages. – Phoenix20 Mar 09 '17 at 16:02

React - scrolling to the bottom of a flex container without scrolling the whole page

2 Answers2