Scrolling fixes

* Remove extra `_markScrolled` function
* Only try to maintain scrolling position when some non-scrolling change has happened.

src/plugins/muc-views/chatarea.js

@@ -1,10 +1,7 @@
-import debounce from 'lodash-es/debounce';
 import tpl_muc_chatarea from './templates/muc-chatarea.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from '@converse/headless/core';
-import { onScrolledDown } from 'shared/chat/utils.js';
-import { safeSave } from '@converse/headless/utils/core.js';
 
 
 const { u } = converse.env;
@@ -23,7 +20,6 @@ export default class MUCChatArea extends CustomElement {
     connectedCallback () {
         super.connectedCallback();
         this.model = _converse.chatboxes.get(this.jid);
-        this.markScrolled = debounce(this._markScrolled, 100);
         this.listenTo(this.model, 'change:show_help_messages', () => this.requestUpdate());
         this.listenTo(this.model, 'change:hidden_occupants', () => this.requestUpdate());
         this.listenTo(this.model.session, 'change:connection_status', () => this.requestUpdate());
@@ -37,7 +33,6 @@ export default class MUCChatArea extends CustomElement {
         return tpl_muc_chatarea({
             'help_messages': this.getHelpMessages(),
             'jid': this.jid,
-            'markScrolled': ev => this.markScrolled(ev),
             'model': this.model,
             'occupants': this.model.occupants,
             'occupants_width': this.model.get('occupants_width'),
@@ -85,34 +80,6 @@ export default class MUCChatArea extends CustomElement {
             .filter(line => this.model.getAllowedCommands().some(c => line.startsWith(c + '<', 9)));
     }
 
-    /**
-     * Called when the chat content is scrolled up or down.
-     * We want to record when the user has scrolled away from
-     * the bottom, so that we don't automatically scroll away
-     * from what the user is reading when new messages are received.
-     *
-     * Don't call this method directly, instead, call `markScrolled`,
-     * which debounces this method by 100ms.
-     * @private
-     */
-    _markScrolled () {
-        let scrolled = true;
-        const is_at_bottom = this.scrollTop + this.clientHeight >= this.scrollHeight;
-        if (is_at_bottom) {
-            scrolled = false;
-            onScrolledDown(this.model);
-        } else if (this.scrollTop === 0) {
-            /**
-             * Triggered once the chat's message area has been scrolled to the top
-             * @event _converse#chatBoxScrolledUp
-             * @property { _converse.ChatBoxView | _converse.ChatRoomView } view
-             * @example _converse.api.listen.on('chatBoxScrolledUp', obj => { ... });
-             */
-            api.trigger('chatBoxScrolledUp', this);
-        }
-        safeSave(this.model, { scrolled });
-    }
-
     onMousedown (ev) {
         if (u.hasClass('dragresize-occupants-left', ev.target)) {
             this.onStartResizeOccupants(ev);

src/shared/chat/chat-content.js

@@ -18,7 +18,7 @@ export default class ChatContent extends CustomElement {
     connectedCallback () {
         super.connectedCallback();
         this.debouncedMaintainScroll = debounce(this.maintainScrollPosition, 100);
-        this.markScrolled = debounce(this._markScrolled, 100);
+        this.markScrolled = debounce(this._markScrolled, 50);
 
         this.model = _converse.chatboxes.get(this.jid);
         this.listenTo(this.model, 'change:hidden_occupants', this.requestUpdate);
@@ -40,7 +40,7 @@ export default class ChatContent extends CustomElement {
         // didn't initiate the scrolling.
         this.was_scrolled_up = this.model.get('scrolled');
         this.addEventListener('imageLoaded', () => {
-            this.debouncedMaintainScroll(this.was_scrolled_up);
+            this.debouncedMaintainScroll();
         });
         this.addEventListener('scroll', () => this.markScrolled());
         this.initIntersectionObserver();
@@ -59,8 +59,15 @@ export default class ChatContent extends CustomElement {
     }
 
     updated () {
-        this.was_scrolled_up = this.model.get('scrolled');
-        this.debouncedMaintainScroll();
+        const scrolled = this.model.get('scrolled');
+        if (this.was_scrolled_up === scrolled) {
+            this.debouncedMaintainScroll();
+        } else {
+            this.was_scrolled_up = scrolled;
+            if (!this.scrolled) {
+                this.scrollDown();
+            }
+        }
     }
 
     initIntersectionObserver () {
@@ -101,7 +108,9 @@ export default class ChatContent extends CustomElement {
              */
             api.trigger('chatBoxScrolledUp', this);
         }
-        safeSave(this.model, { scrolled });
+        if (this.model.get('scolled') !== scrolled) {
+            safeSave(this.model, { scrolled });
+        }
     }
 
     setAnchoredMessage (entries) {
@@ -117,7 +126,6 @@ export default class ChatContent extends CustomElement {
 
     maintainScrollPosition () {
         if (this.was_scrolled_up) {
-            console.warn('scrolling into view');
             this.anchored_message?.scrollIntoView(true);
         } else {
             this.scrollDown();