diff --git a/routes/_components/virtualList/VirtualList.html b/routes/_components/virtualList/VirtualList.html
index d26ed072..3b8c2f2b 100644
--- a/routes/_components/virtualList/VirtualList.html
+++ b/routes/_components/virtualList/VirtualList.html
@@ -1,5 +1,5 @@
-
+
{{#each $visibleItems as visibleItem @key}}
{
this.fire('scrollToBottom')
}, SCROLL_TO_BOTTOM_DELAY)
+ let node = this.refs.node
this.observe('showFooter', showFooter => {
this.store.setForRealm({showFooter: showFooter})
})
@@ -43,6 +44,10 @@
})
this.observe('scrollToItem', (scrollToItem) => {
mark('scrollToItem')
+ if (scrollToItem && node && !this.store.get('virtualListTop')) {
+ // have to calculate difference between container and virtual list tops in order to scroll
+ this.store.set({virtualListTop: node.getBoundingClientRect().top})
+ }
this.store.setForRealm({scrollToItem: scrollToItem})
stop('scrollToItem')
})
diff --git a/routes/_components/virtualList/VirtualListContainer.html b/routes/_components/virtualList/VirtualListContainer.html
index e6f770c1..a3ff8e7e 100644
--- a/routes/_components/virtualList/VirtualListContainer.html
+++ b/routes/_components/virtualList/VirtualListContainer.html
@@ -19,6 +19,14 @@
let node = this.refs.node
let realm = this.get('realm')
this.store.set({currentRealm: realm})
+
+ this.observe('scrollToItem', scrollToItem => {
+ if (scrollToItem && node && !this.store.get('containerTop')) {
+ // have to calculate difference between container and virtual list tops in order to scroll
+ this.store.set({containerTop: node.getBoundingClientRect().top})
+ }
+ })
+
let scrollTop = this.store.get('scrollTop')
if (scrollTop > 0) {
this.observe('allVisibleItemsHaveHeight', allVisibleItemsHaveHeight => {
@@ -27,7 +35,7 @@
this.set({'initializedScrollTop': true})
requestAnimationFrame(() => {
mark('set scrollTop')
- console.log('forcing scroll top to ', scrollTop)
+ console.log('forcing scrollTop to ', scrollTop)
node.scrollTop = scrollTop
stop('set scrollTop')
})
@@ -44,7 +52,7 @@
this.set({'initializedScrollTop': true})
requestAnimationFrame(() => {
mark('set scrollToItemOffset')
- console.log('forcing scroll top to ', scrollToItemOffset)
+ console.log('forcing scrollItemOffset to ', scrollToItemOffset)
node.scrollTop = scrollToItemOffset
stop('set scrollToItemOffset')
})
@@ -89,6 +97,7 @@
},
methods: {
onScroll(event) {
+ console.log('onScroll', event.target.scrollTop)
this.store.setForRealm({
scrollTop: event.target.scrollTop,
scrollHeight: event.target.scrollHeight
@@ -104,7 +113,8 @@
computed: {
// TODO: bug in svelte/store – the observer in oncreate() never get removed without this hack
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight,
- scrollToItemOffset: ($scrollToItemOffset) => $scrollToItemOffset
+ scrollToItemOffset: ($scrollToItemOffset) => $scrollToItemOffset,
+ scrollToItem: ($scrollToItem) => $scrollToItem
}
};
\ No newline at end of file
diff --git a/routes/_components/virtualList/virtualListStore.js b/routes/_components/virtualList/virtualListStore.js
index 4d84c4f3..3858b620 100644
--- a/routes/_components/virtualList/virtualListStore.js
+++ b/routes/_components/virtualList/virtualListStore.js
@@ -92,12 +92,11 @@ virtualListStore.compute('visibleItems',
let currentOffset = totalOffset
totalOffset += height
if (!itemsLeftToCalculateHeight) {
- let isBelowViewport = (currentOffset < scrollTop)
- if (!isBelowViewport) {
+ if (currentOffset < scrollTop) { // below viewport
if (scrollTop - renderBuffer > currentOffset) {
continue // below the area we want to render
}
- } else {
+ } else { // above or inside viewport
if (currentOffset > (scrollTop + height + renderBuffer)) {
break // above the area we want to render
}
@@ -171,9 +170,9 @@ virtualListStore.compute('itemsLeftToCalculateHeight',
})
virtualListStore.compute('scrollToItemOffset',
- ['mustCalculateAllItemHeights', 'itemsLeftToCalculateHeight', 'scrollToItem', 'items', 'itemHeights'],
- (mustCalculateAllItemHeights, itemsLeftToCalculateHeight, scrollToItem, items, itemHeights) => {
- if (!mustCalculateAllItemHeights || itemsLeftToCalculateHeight) {
+ ['mustCalculateAllItemHeights', 'itemsLeftToCalculateHeight', 'scrollToItem', 'items', 'itemHeights', 'containerTop', 'virtualListTop'],
+ (mustCalculateAllItemHeights, itemsLeftToCalculateHeight, scrollToItem, items, itemHeights, containerTop, virtualListTop) => {
+ if (!mustCalculateAllItemHeights || itemsLeftToCalculateHeight || !containerTop || !virtualListTop) {
return null
}
let offset = 0
@@ -183,7 +182,7 @@ virtualListStore.compute('scrollToItemOffset',
}
offset += itemHeights[item]
}
- return offset
+ return offset + (virtualListTop - containerTop) // have to offset difference between container and virtual list
})