fix(scroll): fix offsetHeight for scrolling whole document (#664)

This commit is contained in:
Nolan Lawson 2018-11-20 08:58:13 -08:00 committed by GitHub
parent 20ae390308
commit 5f5cb0d36d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 6 deletions

View file

@ -6,7 +6,13 @@
import { mark, stop } from '../../_utils/marks'
import { doubleRAF } from '../../_utils/doubleRAF'
import { observe } from 'svelte-extras'
import { addScrollListener, removeScrollListener, getScrollContainer } from '../../_utils/scrollContainer'
import {
addScrollListener,
removeScrollListener,
getScrollContainer,
getOffsetHeight
} from '../../_utils/scrollContainer'
import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize'
const SCROLL_EVENT_DELAY = 300
@ -19,7 +25,9 @@
this.store.setCurrentRealm(realm)
this.setupScroll()
this.setupFullscreen()
this.onResize = this.onResize.bind(this)
let { scrollTop } = this.store.get()
let scrollContainer = getScrollContainer()
if (scrollTop > 0) {
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
console.log('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight)
@ -28,7 +36,7 @@
this.set({ 'initializedScrollTop': true })
mark('set scrollTop')
console.log('forcing scroll top to ', scrollTop)
getScrollContainer().scrollTop = scrollTop
scrollContainer.scrollTop = scrollTop
stop('set scrollTop')
doubleRAF(() => {
console.log('initialized VirtualList')
@ -44,17 +52,16 @@
this.fire('initialized')
}
})
this.store.setForRealm({
scrollHeight: getScrollContainer().scrollHeight,
offsetHeight: getScrollContainer().offsetHeight
})
this.onResize()
}
registerResizeListener(this.onResize)
stop('onCreate VirtualListContainer')
},
ondestroy () {
this.teardownScroll()
this.teardownFullscreen()
this.store.setCurrentRealm(null)
unregisterResizeListener(this.onResize)
},
store: () => virtualListStore,
methods: {
@ -96,6 +103,12 @@
console.log('is fullscreen? ', isFullscreen())
this.set({ fullscreen: isFullscreen() })
stop('onFullscreenChange')
},
onResize () {
this.store.setForRealm({
scrollHeight: getScrollContainer().scrollHeight,
offsetHeight: getOffsetHeight()
})
}
},
computed: {

View file

@ -9,3 +9,11 @@ export function addScrollListener (listener) {
export function removeScrollListener (listener) {
document.removeEventListener('scroll', listener)
}
export function getOffsetHeight () {
// in a subscroller, this would be element.offsetHeight, but here
// document.scrollingElement.offsetHeight is too short for some reason.
// This one is exact, such that scrollHeight - scrollTop - offsetHeight === 0
// when you are scrolled to the bottom.
return window.innerHeight
}