Scroll navbar when scrolling picker. Fixes #14

This commit is contained in:
Tulir Asokan 2020-09-10 17:14:15 +03:00
parent 74cd8d82fe
commit e28540aba5

View File

@ -43,6 +43,8 @@ class App extends Component {
this.sendSticker = this.sendSticker.bind(this) this.sendSticker = this.sendSticker.bind(this)
this.navScroll = this.navScroll.bind(this) this.navScroll = this.navScroll.bind(this)
this.reloadPacks = this.reloadPacks.bind(this) this.reloadPacks = this.reloadPacks.bind(this)
this.observeSectionIntersections = this.observeSectionIntersections.bind(this)
this.observeImageIntersections = this.observeImageIntersections.bind(this)
} }
_getStickersByID(ids) { _getStickersByID(ids) {
@ -129,15 +131,32 @@ class App extends Component {
} }
observeSectionIntersections(intersections) { observeSectionIntersections(intersections) {
const navWidth = this.navRef.getBoundingClientRect().width
let minX = 0, maxX = navWidth
let minXElem = null
let maxXElem = null
for (const entry of intersections) { for (const entry of intersections) {
const packID = entry.target.getAttribute("data-pack-id") const packID = entry.target.getAttribute("data-pack-id")
const navElement = document.getElementById(`nav-${packID}`) const navElement = document.getElementById(`nav-${packID}`)
if (entry.isIntersecting) { if (entry.isIntersecting) {
navElement.classList.add("visible") navElement.classList.add("visible")
const bb = navElement.getBoundingClientRect()
if (bb.x < minX) {
minX = bb.x
minXElem = navElement
} else if (bb.right > maxX) {
maxX = bb.right
maxXElem = navElement
}
} else { } else {
navElement.classList.remove("visible") navElement.classList.remove("visible")
} }
} }
if (minXElem !== null) {
minXElem.scrollIntoView({ inline: "start", behavior: "smooth" })
} else if (maxXElem !== null) {
maxXElem.scrollIntoView({ inline: "end", behavior: "instant" })
}
} }
componentDidUpdate() { componentDidUpdate() {