github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-26 10:14:16 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

NotificationList: Fix load on mobile

Browse Source 
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.
This commit is contained in:
Alexander Skvortsov 2021-02-23 14:21:18 -05:00
parent ef2d6a65f4
commit 49009d268f
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/forum/components/NotificationList.js
View File

@ -114,11 +114,13 @@ export default class NotificationList extends Component {
scrollHandler() { scrollHandler() {
const state = this.attrs.state; 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 // On very short screens, the scrollHeight + scrollTop might not reach the clientHeight
// by a fraction of a pixel, so we compensate for that. // 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) { if (state.hasMoreResults() && !state.isLoading() && atBottom) {
state.loadMore(); state.loadMore();