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

Intersection在高度大于视图的元素上的观察者位置

0 个答案: