diff options
| -rw-r--r-- | client/html/endless_pager_page.tpl | 3 | ||||
| -rw-r--r-- | client/js/views/endless_page_view.js | 14 |
2 files changed, 9 insertions, 8 deletions
diff --git a/client/html/endless_pager_page.tpl b/client/html/endless_pager_page.tpl index 9b1cf6c..1212ba8 100644 --- a/client/html/endless_pager_page.tpl +++ b/client/html/endless_pager_page.tpl @@ -1,4 +1,5 @@ <div class='page'> - <p class='page-header'><span>Page <%- ctx.page %> of <%- ctx.totalPages %></span></p> +<!-- Don't show the header, make page transition seamless: --> +<!-- <p class='page-header'><span>Page <%- ctx.page %> of <%- ctx.totalPages %></span></p>*} --> <div class='page-content-holder'></div> </div> diff --git a/client/js/views/endless_page_view.js b/client/js/views/endless_page_view.js index d5e709f..a055a0e 100644 --- a/client/js/views/endless_page_view.js +++ b/client/js/views/endless_page_view.js @@ -6,6 +6,8 @@ const views = require("../util/views.js"); const holderTemplate = views.getTemplate("endless-pager"); const pageTemplate = views.getTemplate("endless-pager-page"); +const SCROLL_THRESHOLD = 100; + function isScrolledIntoView(element) { let top = 0; do { @@ -132,10 +134,7 @@ class EndlessPageView { return; } - if ( - this.minOffsetShown > 0 && - isScrolledIntoView(this.topPageGuardNode) - ) { + if (this.minOffsetShown > 0 && window.scrollY < SCROLL_THRESHOLD) { this._loadPage( ctx, this.minOffsetShown - this.defaultLimit, @@ -144,16 +143,17 @@ class EndlessPageView { ); } + const pageBottom = this._pagesHolderNode.getBoundingClientRect().bottom; if ( this.maxOffsetShown < this.totalRecords && - isScrolledIntoView(this.bottomPageGuardNode) + pageBottom < window.innerHeight + SCROLL_THRESHOLD ) { this._loadPage(ctx, this.maxOffsetShown, this.defaultLimit, true); } } _shouldUseCache(ctx) { - return ctx.browserState != undefined && ctx.browserState != null && + return ctx.browserState !== undefined && ctx.browserState != null && ctx.readPageFromCache !== undefined; } @@ -167,7 +167,7 @@ class EndlessPageView { _clearCache(ctx) { if (!this._shouldUseCache(ctx)) return; - ctx.browserState.pageCache = { path: history.state.path, pages: {} }; + ctx.browserState.pageCache = {path: history.state.path, pages: {}}; } _loadCachedPages(ctx) { |