diff options
author | Pepijn <pepijnfens@gmail.com> | 2017-02-07 16:18:20 +0100 |
---|---|---|
committer | enahum <nahumhbl@gmail.com> | 2017-02-07 07:18:20 -0800 |
commit | 9bdea0de80a21b214eb9041057ab8e3fea681a8b (patch) | |
tree | aff3c8587842cfe8476c9830407f058f4a450deb /webapp | |
parent | 466bd8415d1ff9fed0cd5b263d0eed35c87b7e2b (diff) | |
download | chat-9bdea0de80a21b214eb9041057ab8e3fea681a8b.tar.gz chat-9bdea0de80a21b214eb9041057ab8e3fea681a8b.tar.bz2 chat-9bdea0de80a21b214eb9041057ab8e3fea681a8b.zip |
Defering calculations for determining if user scrolled to bottom or not. slight delay improves the accuracy in responsive view (#5244)
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/post_view/components/post_list.jsx | 16 |
1 files changed, 9 insertions, 7 deletions
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index 7550db348..3584e9923 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -120,17 +120,10 @@ export default class PostList extends React.Component { break; } } - this.wasAtBottom = this.isAtBottom(); if (!this.jumpToPostNode && childNodes.length > 0) { this.jumpToPostNode = childNodes[childNodes.length - 1]; } - // --- -------- - - this.props.postListScrolled(this.isAtBottom()); - this.prevScrollHeight = this.refs.postlist.scrollHeight; - this.prevOffsetTop = this.jumpToPostNode.offsetTop; - this.updateFloatingTimestamp(); if (!this.state.isScrolling) { @@ -139,6 +132,15 @@ export default class PostList extends React.Component { }); } + // Postpone all DOM related calculations to next frame. + // scrollHeight etc might return wrong data at this point + setTimeout(() => { + this.wasAtBottom = this.isAtBottom(); + this.props.postListScrolled(this.isAtBottom()); + this.prevScrollHeight = this.refs.postlist.scrollHeight; + this.prevOffsetTop = this.jumpToPostNode.offsetTop; + }, 0); + this.scrollStopAction.fireAfter(Constants.SCROLL_DELAY); } |