Endless / Infinite Pagination In Dropdown
Recently I have been re-implementing the Notification Menu at OneHealth in Backbone + Marionette and wanted to incorporate endless pagination, real-time dynamic updates, and just an overall clean / simple user experience.
When building the endless pagination I had noticed when you scroll to the end of the list the body starts to scroll. Well, That’s annoying. Okay, so lets throw in a e.preventDefault()
on the list scroll binding. Hmm, that doesn’t prevent the current list from scrolling. Now What?
Lets start with some simple View Setup
//Module Variables Used
this.eol
(Was The End Of List Hit)
this.lastFire
(Height of Last Pagination Fire)
this.collection
(Backbone Collection)
...
ui : {
container : '.js-notification-list-container',
list : '.js-notification-list',
loadingBar : '.js-loading-bar',
endOfList : '.js-endOfList'
},
/**
* Method For Paginating
...