时间戳

首页 > 解决方案 > 高度大于视图的元素上的 IntersectionObserver 位置

javascript - 高度大于视图的元素上的 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

标签： javascriptintersection-observer

解决方案

推荐阅读