properly cache scroll top

This commit is contained in:
Nolan Lawson 2018-01-24 18:04:25 -08:00
parent fb234adb79
commit 754bbf0d46
3 changed files with 27 additions and 8 deletions

View file

@ -8,7 +8,6 @@
footerComponent="{{LoadingFooter}}"
showFooter="{{initialized && runningUpdate}}"
storeKey="{{timeline}}"
initialized="{{initialized}}"
/>
</div>
<style>

View file

@ -45,9 +45,12 @@
ondestroy() {
let storeKey = this.get('storeKey')
if (storeKey) {
let clonedState = this.store.cloneState()
if (process.env.NODE_ENV !== 'production') {
console.log('caching scroll top', clonedState.scrollTop)
}
cachedVirtualStores[storeKey] = {
state: this.store.cloneState(),
height: this.store.get('height')
state: clonedState
}
}
},
@ -94,23 +97,29 @@
},
onFullscreenChange() {
mark('onFullscreenChange')
console.log('is fullscreen? ', isFullscreen())
if (process.env.NODE_ENV !== 'production') {
console.log('is fullscreen? ', isFullscreen())
}
this.set({ fullscreen: isFullscreen() })
stop('onFullscreenChange')
},
rehydrateScrollTop(cachedStore) {
let cachedScrollTop = cachedStore.state.scrollTop || 0
let cachedHeight = cachedStore.height
if (cachedScrollTop === 0) {
return
if (process.env.NODE_ENV !== 'production') {
console.log('no need to force scroll top')
}
}
let initializedScrollTop = false
let node = this.refs.node
this.store.observe('height', height => {
if (!initializedScrollTop && height === cachedHeight && node) {
this.store.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
if (!initializedScrollTop && allVisibleItemsHaveHeight && node) {
initializedScrollTop = true
requestAnimationFrame(() => {
mark('set scrollTop')
if (process.env.NODE_ENV !== 'production') {
console.log('forcing scroll top to ', cachedScrollTop)
}
node.scrollTop = cachedScrollTop
stop('set scrollTop')
})

View file

@ -117,6 +117,17 @@ virtualListStore.compute('height',
virtualListStore.compute('numItems', ['items'], (items) => items.length)
virtualListStore.compute('allVisibleItemsHaveHeight',
['visibleItems', 'itemHeights'],
(visibleItems, itemHeights) => {
for (let visibleItem of visibleItems) {
if (!itemHeights[visibleItem.key]) {
return false
}
}
return true
})
if (process.browser && process.env.NODE_ENV !== 'production') {
window.virtualListStore = virtualListStore
}