From 35e7876f094a93f4f455743c2dc707f82ac4b58b Mon Sep 17 00:00:00 2001 From: Alexander Skvortsov Date: Tue, 23 Feb 2021 14:21:18 -0500 Subject: [PATCH] NotificationList: Fix load on mobile Followup to https://github.com/flarum/core/pull/2524. In that PR, we fixed infinite scroll for the panel, but accidentially used document.body. Since scrollTop on body is (almost always) 0, this means that new pages of notifications were loaded on every scroll, which quickly becomes overwhelming. Instead, we can use `document.documentElement` for getting scrollTop, which results in the expected behavior. --- framework/core/js/src/forum/components/NotificationList.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/framework/core/js/src/forum/components/NotificationList.js b/framework/core/js/src/forum/components/NotificationList.js index 2db7bbbf3..31a079cc0 100644 --- a/framework/core/js/src/forum/components/NotificationList.js +++ b/framework/core/js/src/forum/components/NotificationList.js @@ -114,11 +114,13 @@ export default class NotificationList extends Component { scrollHandler() { const state = this.attrs.state; - const notificationsElement = this.inPanel() ? this.$scrollParent[0] : document.querySelector('body'); + // Whole-page scroll events are listened to on `window`, but we need to get the actual + // scrollHeight, scrollTop, and clientHeight from the document element. + const scrollParent = this.inPanel() ? this.$scrollParent[0] : document.documentElement; // On very short screens, the scrollHeight + scrollTop might not reach the clientHeight // by a fraction of a pixel, so we compensate for that. - const atBottom = Math.abs(notificationsElement.scrollHeight - notificationsElement.scrollTop - notificationsElement.clientHeight) <= 1; + const atBottom = Math.abs(scrollParent.scrollHeight - scrollParent.scrollTop - scrollParent.clientHeight) <= 1; if (state.hasMoreResults() && !state.isLoading() && atBottom) { state.loadMore();