github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2024-11-29 12:43:52 +08:00
Code Issues Actions 20 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 a008734b63
commit 35e7876f09
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
framework/core/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();