From 24d9ab3ca9401205551fdc3ce96d1e80281e17aa Mon Sep 17 00:00:00 2001 From: Homero Silva Date: Wed, 3 Apr 2019 10:56:11 -0600 Subject: [PATCH] Pin position when new children appear --- src/react-chatview.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/react-chatview.js b/src/react-chatview.js index c13d035..130c4c5 100644 --- a/src/react-chatview.js +++ b/src/react-chatview.js @@ -130,6 +130,12 @@ export default class ChatView extends Component { this.scrollTop = this.scrollable.scrollTop; this.scrollHeight = this.scrollable.scrollHeight; + //Pin scroll position when new children are coming if user is not at bottom or top + let userIsAtBottom = this.scrollable.scrollHeight - this.scrollable.scrollTop === this.scrollable.clientHeight; + if(!userIsAtBottom && this.props.shouldTriggerLoad()){ + this.scrollable.scrollTop = newScrollTop + scrollHeightDifference; + } + // Setting scrollTop can halt user scrolling (and disables hardware acceleration) // Both cases - flipped and refular - have cases where the content expands in the proper direction,