Open pavelmobstudio opened 7 years ago
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>
)
}
}
Is this still open - I'm getting the same error message ?
Hello. I need to render channel with a lot of messages. I wrapped messages into
Component
which detectscomponentDidUpdate
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.
no-css.js?a829:1 Uncaught TypeError: Cannot read property 'offsetHeight' of null(…)