5

I'm looking for a way to show user in menu where he is on the page. Each menu item has anchor link to another element and IntersectionObserver which is setting background width for item and and if item is shown from bottom or top (left right on background)

let options = {
  root: null,
  rootMargin: "0px",
  threshold: []
}
for (let i = 0; i <= 1.0; i += 0.01) {
  options.threshold.push(i)
}
this.observer = new IntersectionObserver(entries => {
  const item = entries[0]
  if (item.isIntersecting) {
    let visiblePct = Math.floor(item.intersectionRatio * 100)
    this.pageProgressOpt.width =
      (this.$el.getBoundingClientRect().width / 100) * visiblePct
    this.pageProgressOpt.align =
      item.boundingClientRect.top < 0 ? "right" : "left"
  } else {
    this.pageProgressOpt.width = 0
  }
}, options)

But when element height is bigger than height of visible window and view is in the middle of element callback is not fired. This is bit obvious because threshold 1.0 is reached. But I'm looking for way to continue observe element. I was thinking to attach on scroll when this happen but there is no way how to say if this happen.

Should I just use scroll event for this or is it any workaround?

//EDIT: here is video of what I'm doing https://drive.google.com/file/d/1gPrIWgcLTJ3vhquyrUnyyh9IlTuZiDRJ/view

zajca
  • 2,288
  • 4
  • 30
  • 40
  • 2
    Hi @zajca, I know this question is old, but I struggled with a similar issue recently. It looks like this is the expected behavior of Intersection Observer. Take a look at this issue on GitHub: https://github.com/w3c/IntersectionObserver/issues/124 There is proposed changed that will allow to achieve what you want, but it's not implemented yet. – Dmitry Mayorov Nov 22 '19 at 15:02

0 Answers0