diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js index cce6bd6df..3504041ea 100644 --- a/app/soapbox/components/scrollable_list.js +++ b/app/soapbox/components/scrollable_list.js @@ -33,6 +33,7 @@ export default class ScrollableList extends PureComponent { state = { cachedMediaWidth: 250, // Default media/card width using default theme + updatedScrollBottom: false, // Prevents getScrollPosition DOM calls if false }; intersectionObserverWrapper = new IntersectionObserverWrapper(); @@ -92,8 +93,13 @@ export default class ScrollableList extends PureComponent { } getScrollPosition = () => { - if (this.documentElement && (this.documentElement.scrollTop > 0 || this.mouseMovedRecently)) { - return { height: this.documentElement.scrollHeight, top: this.documentElement.scrollTop }; + if (this.state.updatedScrollBottom) { + this.setState({ updatedScrollBottom: false }); + if (this.documentElement && (this.documentElement.scrollTop > 0 || this.mouseMovedRecently)) { + return { height: this.documentElement.scrollHeight, top: this.documentElement.scrollTop }; + } else { + return null; + } } else { return null; } @@ -101,7 +107,7 @@ export default class ScrollableList extends PureComponent { updateScrollBottom = (snapshot) => { const newScrollTop = this.documentElement.scrollHeight - snapshot; - + this.setState({ updatedScrollBottom: true }); this.setScrollTop(newScrollTop); } @@ -253,8 +259,8 @@ export default class ScrollableList extends PureComponent { saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null} > {React.cloneElement(child, { - getScrollPosition: this.getScrollPosition, updateScrollBottom: this.updateScrollBottom, + getScrollPosition: this.getScrollPosition, cachedMediaWidth: this.state.cachedMediaWidth, cacheMediaWidth: this.cacheMediaWidth, })}