treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Cancel list scroll reset after mouse move on wheel scroll 

Port 9cfd610484 to glitch-soc
remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Thibaut Girka 2019-01-08 21:22:13 +01:00 committed by ThibG
parent 21f27e6579
commit 19c64a49f7
1 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/javascript/flavours/glitch/components/scrollable_list.js
View File

@ -40,8 +40,6 @@ export default class ScrollableList extends PureComponent {
state = { state = {
fullscreen: null, fullscreen: null,
mouseMovedRecently: false,
scrollToTopOnMouseIdle: false,
}; };
intersectionObserverWrapper = new IntersectionObserverWrapper(); intersectionObserverWrapper = new IntersectionObserverWrapper();
@ -66,6 +64,8 @@ export default class ScrollableList extends PureComponent {
}); });
mouseIdleTimer = null; mouseIdleTimer = null;
mouseMovedRecently = false;
scrollToTopOnMouseIdle = false;
clearMouseIdleTimer = () => { clearMouseIdleTimer = () => {
if (this.mouseIdleTimer === null) { if (this.mouseIdleTimer === null) {
@ -81,29 +81,26 @@ export default class ScrollableList extends PureComponent {
this.mouseIdleTimer = this.mouseIdleTimer =
setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY); setTimeout(this.handleMouseIdle, MOUSE_IDLE_DELAY);
this.setState(({ if (!this.mouseMovedRecently && this.node.scrollTop === 0) {
mouseMovedRecently, // Only set if we just started moving and are scrolled to the top.
scrollToTopOnMouseIdle, this.scrollToTopOnMouseIdle = true;
}) => ({ }
mouseMovedRecently: true, // Save setting this flag for last, so we can do the comparison above.
// Only set scrollToTopOnMouseIdle if we just started moving and were this.mouseMovedRecently = true;
// scrolled to the top. Otherwise, just retain the previous state.
scrollToTopOnMouseIdle:
mouseMovedRecently
? scrollToTopOnMouseIdle
: (this.node.scrollTop === 0),
}));
}, MOUSE_IDLE_DELAY / 2); }, MOUSE_IDLE_DELAY / 2);
handleWheel = throttle(() => {
this.scrollToTopOnMouseIdle = false;
}, 150, {
trailing: true,
});
handleMouseIdle = () => { handleMouseIdle = () => {
if (this.state.scrollToTopOnMouseIdle) { if (this.scrollToTopOnMouseIdle) {
this.node.scrollTop = 0; this.node.scrollTop = 0;
this.props.onScrollToTop();
} }
this.setState({ this.mouseMovedRecently = false;
mouseMovedRecently: false, this.scrollToTopOnMouseIdle = false;
scrollToTopOnMouseIdle: false,
});
} }
componentDidMount () { componentDidMount () {
@ -135,7 +132,7 @@ export default class ScrollableList extends PureComponent {
const someItemInserted = React.Children.count(prevProps.children) > 0 && const someItemInserted = React.Children.count(prevProps.children) > 0 &&
React.Children.count(prevProps.children) < React.Children.count(this.props.children) && React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props); this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
if ((someItemInserted && this.node.scrollTop > 0) || this.state.mouseMovedRecently) { if ((someItemInserted && this.node.scrollTop > 0) || this.mouseMovedRecently) {
return this.node.scrollHeight - this.node.scrollTop; return this.node.scrollHeight - this.node.scrollTop;
} else { } else {
return null; return null;
@ -172,10 +169,12 @@ export default class ScrollableList extends PureComponent {
attachScrollListener () { attachScrollListener () {
this.node.addEventListener('scroll', this.handleScroll); this.node.addEventListener('scroll', this.handleScroll);
this.node.addEventListener('wheel', this.handleWheel);
} }
detachScrollListener () { detachScrollListener () {
this.node.removeEventListener('scroll', this.handleScroll); this.node.removeEventListener('scroll', this.handleScroll);
this.node.removeEventListener('wheel', this.handleWheel);
} }
getFirstChildKey (props) { getFirstChildKey (props) {