forked from cybrespace/pinafore
use scrollIntoView which is more consistent than previous strategy
This commit is contained in:
parent
b4fc6cf99e
commit
c54bde0a19
|
@ -75,24 +75,15 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
scrollToPosition(rect) {
|
scrollToPosition(element) {
|
||||||
if (this.get('scrolledToPosition')) {
|
if (this.get('scrolledToPosition')) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.set({scrolledToPosition: true})
|
this.set({scrolledToPosition: true})
|
||||||
console.log('scrollToPosition', rect.top)
|
requestAnimationFrame(() => {
|
||||||
let container = document.querySelector(this.get('containerQuery'))
|
console.log('scrolling element into view')
|
||||||
if (!container) {
|
element.scrollIntoView(true)
|
||||||
return
|
})
|
||||||
}
|
|
||||||
let containerRect = container.getBoundingClientRect()
|
|
||||||
let scrollTop = rect.top - containerRect.top
|
|
||||||
if (scrollTop !== 0) {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
console.log('setting scrollTop to ', scrollTop)
|
|
||||||
container.scrollTop = scrollTop
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
onIntersection(entries) {
|
onIntersection(entries) {
|
||||||
mark('onIntersection')
|
mark('onIntersection')
|
||||||
|
@ -107,7 +98,7 @@
|
||||||
height: rect.height
|
height: rect.height
|
||||||
}
|
}
|
||||||
if (scrollToItem === key) {
|
if (scrollToItem === key) {
|
||||||
this.scrollToPosition(rect)
|
this.scrollToPosition(entry.target)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
intersectionStates = Object.assign(intersectionStates, newIntersectionStates)
|
intersectionStates = Object.assign(intersectionStates, newIntersectionStates)
|
||||||
|
|
Loading…
Reference in New Issue