From 069657286ffaa01f86f9823fdff20da8e687fd7f Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Tue, 8 Jan 2019 21:26:23 +0100 Subject: [PATCH] [Glitch] Identify manual scrolling to cancel scroll to top reset on mouse idle Port 59ecfbd28c35ab1f922ee85388d9b4c3c2848e49 to glitch-soc --- .../glitch/components/scrollable_list.js | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index 5207495295..09a22f6335 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -58,6 +58,13 @@ export default class ScrollableList extends PureComponent { } else if (this.props.onScroll) { this.props.onScroll(); } + + if (!this.lastScrollWasSynthetic) { + // If the last scroll wasn't caused by setScrollTop(), assume it was + // intentional and cancel any pending scroll reset on mouse idle + this.scrollToTopOnMouseIdle = false; + } + this.lastScrollWasSynthetic = false; } }, 150, { trailing: true, @@ -65,8 +72,16 @@ export default class ScrollableList extends PureComponent { mouseIdleTimer = null; mouseMovedRecently = false; + lastScrollWasSynthetic = false; scrollToTopOnMouseIdle = false; + setScrollTop = newScrollTop => { + if (this.node.scrollTop !== newScrollTop) { + this.lastScrollWasSynthetic = true; + this.node.scrollTop = newScrollTop; + } + }; + clearMouseIdleTimer = () => { if (this.mouseIdleTimer === null) { return; @@ -97,7 +112,7 @@ export default class ScrollableList extends PureComponent { handleMouseIdle = () => { if (this.scrollToTopOnMouseIdle) { - this.node.scrollTop = 0; + this.setScrollTop(0); } this.mouseMovedRecently = false; this.scrollToTopOnMouseIdle = false; @@ -123,9 +138,7 @@ export default class ScrollableList extends PureComponent { updateScrollBottom = (snapshot) => { const newScrollTop = this.node.scrollHeight - snapshot; - if (this.node.scrollTop !== newScrollTop) { - this.node.scrollTop = newScrollTop; - } + this.setScrollTop(newScrollTop); } getSnapshotBeforeUpdate (prevProps, prevState) {