scrollBottom without smoothScrolling

[pavelmobstudio]

Hello. I need to render channel with a lot of messages. I wrapped messages into Component which detects componentDidUpdate and calls some handler like this:

scrollBottomHandler() { setTimeout(() => { this.context.scrollArea.scrollBottom() }, 0) }

(without setTimeout is does not works)

I use smoothScrolling={true}. But when I render the channel for the first time, I do not need such effect to scroll to needed position.

1. How can I scroll bottom without smooth scrolling, but use it in another cases?
2. Is there any other way to refresh list after it was rendered without using setTimeout()? I get no-css.js?a829:1 Uncaught TypeError: Cannot read property 'offsetHeight' of null(…)

[sungjk]

I've the same problem and solved using basic scroll instead of reactScrollbar.

Here is an example of my code. scrollToBottom() is called after all of messages rendered.

class MessageList extends React.Component {

    ...

    componentDidMount() {
        this.refs.messageList.addEventListener('scroll', this.onScroll)
        this.scrollToBottom()
    }

    componentWillReceiveProps(newProps) {
        if (Your custom flag) {
            this.scrollToBottom()
        }
    }

    componentWillUnmount() {
        this.refs.messageList.removeEventListener('scroll', this.onScroll)
    }

    scrollToBottom() {
        const scrollHeight = $('.message_list').prop('scrollHeight')
        $('.message_list').animate({scrollTop: scrollHeight}, 500, 'swing')
    }

    onScroll(event) {
        const element = event.srcElement;
        if (element) {
            const topVisible = element.scrollTop == 0
            if (topVisible) {
                // Action load more messages
            }
        }
    }

    render() {
        return (
            <div ref="messageList"
                className="message_list"
                onScroll={this.onScroll}>
                // render your list 
            </div>
        )
    }
}

[joetidee]

Is this still open - I'm getting the same error message ?