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

View file

@ -9,3 +9,11 @@ export function addScrollListener (listener) {
export function removeScrollListener (listener) { export function removeScrollListener (listener) {
document.removeEventListener('scroll', 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
}