1 files changed, 17 insertions, 8 deletions

diff --git a/web/react/components/sidebar_right.jsx b/web/react/components/sidebar_right.jsx
index 913715154..e63418ae8 100644
--- a/web/react/components/sidebar_right.jsx
+++ b/web/react/components/sidebar_right.jsx
@@ -14,9 +14,10 @@ export default class SidebarRight extends React.Component {
     constructor(props) {
         super(props);
 
+        this.plScrolledToBottom = true;
+
         this.onSelectedChange = this.onSelectedChange.bind(this);
         this.onSearchChange = this.onSearchChange.bind(this);
-        this.resize = this.resize.bind(this);
 
         this.state = getStateFromStores();
     }
@@ -28,6 +29,14 @@ export default class SidebarRight extends React.Component {
         PostStore.removeSearchChangeListener(this.onSearchChange);
         PostStore.removeSelectedPostChangeListener(this.onSelectedChange);
     }
+    componentDidUpdate() {
+        if (!this.plScrolledToBottom) {
+            $('.top-visible-post')[0].scrollIntoView();
+        } else {
+            var postHolder = $('.post-list-holder-by-time');
+            postHolder.scrollTop(postHolder[0].scrollHeight);
+        }
+    }
     onSelectedChange(fromSearch) {
         var newState = getStateFromStores(fromSearch);
         newState.from_search = fromSearch;
@@ -41,15 +50,15 @@ export default class SidebarRight extends React.Component {
             this.setState(newState);
         }
     }
-    resize() {
-        var postHolder = $('.post-list-holder-by-time');
-        postHolder[0].scrollTop = postHolder[0].scrollHeight - 224;
-    }
     render() {
+        var postHolder = $('.post-list-holder-by-time');
+        const position = postHolder.scrollTop() + postHolder.height() + 14;
+        const bottom = postHolder[0].scrollHeight;
+        this.plScrolledToBottom = position >= bottom;
+
         if (!(this.state.search_visible || this.state.post_right_visible)) {
             $('.inner__wrap').removeClass('move--left').removeClass('move--right');
             $('.sidebar--right').removeClass('move--left');
-            this.resize();
             return (
                 <div></div>
             );
@@ -59,8 +68,8 @@ export default class SidebarRight extends React.Component {
         $('.sidebar--left').removeClass('move--right');
         $('.sidebar--right').addClass('move--left');
         $('.sidebar--right').prepend('<div class="sidebar__overlay"></div>');
-        this.resize();
-        setTimeout(function overlayTimer() {
+
+        setTimeout(() => {
             $('.sidebar__overlay').fadeOut('200', function fadeOverlay() {
                 $(this).remove();
             });