IntersectionObserver 在高度大于视图的元素上的位置

Question

我正在寻找一种方法来在菜单中向用户显示他在页面上的位置。每个菜单项都有指向另一个元素和 IntersectionObserver 的锚链接，IntersectionObserver 设置项目的背景宽度，以及项目是否从底部或顶部显示（背景上的左右）

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)

但是，当元素高度大于可见窗口的高度并且视图位于元素中间时，不会触发回调。这有点明显，因为达到了阈值 1.0。但我正在寻找继续观察元素的方法。我想在发生这种情况时附加到滚动条上，但无法说明是否发生这种情况。

我应该为此使用滚动事件还是有任何解决方法？

//编辑：这是我正在做的视频https://drive.google.com/file/d/1gPrIWgcLTJ3vhquyrUnyyh9IlTuZiDRJ/view