fix(scroll): fix offsetHeight for scrolling whole document (#664)
This commit is contained in:
parent
20ae390308
commit
5f5cb0d36d
|
@ -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: {
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue