Fix overly sticky auto-scroll behavior (#4382) The problem: Auto-scroll is overly sticky. While a generated message is streaming in, it is almost impossible to cancel the auto-scroll behavior by scrolling up, it just snaps back down. The reason is that the 'wheel' and 'touchmove' events trigger before the scroll position is updated. So the scrollIsAtBottom value never becomes false. That is, unless the user manages to scroll up quick enough to beat the call to scrollChatToBottom() in onProgressStreaming(). The 'scroll' event is better because it fires slightly later in the scroll behavior. This makes canceling auto-scroll by scrolling up much more reliable. Making auto-scroll cancelling more reliable has the side effect that resuming auto-scroll becomes harder. To even this out, this change slightly increases the tolerance for resuming auto-scroll to 5 pixels. This is small enough to be generally unnoticeable but significantly easier to hit than the previous 1 pixel. I tested this change in * Firefox on Linux * Chrome on Linux * Firefox on Android * Chrome on Android In all cases, the auto-scroll behavior is greatly improved: * While auto-scrolling, scrolling a little bit up immediately cancels the auto-scroll behavior. * Scrolling all the way down resumes the auto-scroll behavior.

667116f4ffd9b731682611a68fc22feb7731bb12

Christoph <github@yozora.eu>

Signed

public/script.js+2 -3 Viewed

             return;
+        }
         const scrollIsAtBottom = Math.abs(chatElementScroll.scrollHeight - chatElementScroll.clientHeight - chatElementScroll.scrollTop) < 15;
         // Resume autoscroll if the user scrolls to the bottom
         if (scrollLock && scrollIsAtBottom) {

             scrollLock = true;
+        }
     };
     chatElementScroll.addEventListener('wheelscroll', chatScrollHandler, { passive: true });
 -    chatElementScroll.addEventListener('touchmove', chatScrollHandler, { passive: true });
     $(document).on('click', '.mes', function () {
         //when a 'delete message' parent div is clicked