javascript - 如果完全在 View 中(大于视口(viewport))，intersectionObserver 获得比率 1-6ren

javascript - 如果完全在 View 中(大于视口(viewport))，intersectionObserver 获得比率 1

转载作者：行者123 更新时间：2023-12-03 07:11:09

25

4

我有一个页面分为多个部分。现在在滚动时，我尝试使用导航项底部边框的宽度来显示进度( View 中有多少部分)。在下面，您将找到我如何实现它的示例。

现在你可以看到，如果一个部分高于视口(viewport)，intersectionRatio 将永远不会达到 1(这反过来不会绘制全宽边框)。我可以使用任何选项或替代方法来实际实现全宽度吗？

(function() {
    var sections = [],
        links = {},
        thresholdSet = [[]],
        observerOptions = {
            root: null,
            rootMargin: "0px",
            threshold: _buildThresholdList()
        };

    function _init() {
        if (!'IntersectionObserver' in window) {
            return;
        }

        sections = document.getElementsByClassName('section');

        for(var i = 0; i < sections.length; i++) {
            var observer = new IntersectionObserver(_intersectionCallback, observerOptions),
                section = sections[i],
                link = document.getElementById('js-' + section.id);

            links[section.id] = {
                node: link,
                initialWidth: link.offsetWidth
            };

            observer.observe(section);
        }
    }

    function _buildThresholdList() {
        for(var i = 0; i <= 1.0; i += 0.01) {
            thresholdSet[0].push(i.toFixed(2));
        }

        console.table(thresholdSet[0]);
        return thresholdSet[0];
    }

    function _intersectionCallback(entries) {
        entries.forEach(function(entry) {
            var section = entry.target;
            var link = links[section.id];
            var width = link.initialWidth * (entry.intersectionRatio || 0) + "px";

            link.node.style.width = width;

            console.log(section.id, entry.intersectionRatio);
        });
    }
    
    _init();
}());

body {
  display: flex;
}

.aside {
  flex: 0 0 150px;
}

.nav {
  position: sticky;
  top: 0;
}

.nav li {
  margin-bottom: 20px;
}

.nav li span {
 display: inline-block;
 padding-bottom: 10px;
 border-bottom: 2px solid red;
}

.sections {
  flex: 1;
}

#page1 {
  height: 350px;
  background-color: #cc8136;
}

#page2 {
  height: 1500px;
  background-color: #6538c4;
}

#page3 {
  height: 1300px;
  background-color: #9e7f9b;
}

#page4 {
  height: 300px;
  background-color: #568574;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="aside">
      <ul class="nav">
        <li><span id="js-page1">page1</span></li>
        <li><span id="js-page2">page2</span></li>
        <li><span id="js-page3">page3</span></li>
        <li><span id="js-page4">page4</span></li>
      </ul>
    </div>
    <div class="sections">
      <div class="section" id="page1"></div>
      <div class="section" id="page2"></div>
      <div class="section" id="page3"></div>
      <div class="section" id="page4"></div>
    </div>
</body>
</html>

最佳答案

K 所以而不是使用 entry.intersectionRatio , 我正在使用 entry.intersectionRect.height / viewportHeight .

关于javascript - 如果完全在 View 中(大于视口(viewport))，intersectionObserver 获得比率 1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59895216/

25

4

0

文章推荐： javascript - Cypress - 使用路由(选项) stub 不起作用

文章推荐： javascript - 来自 Yup 的自定义验证的错误消息不会消失

文章推荐： javascript - SHA256 使用 Filereader 问题以 Angular 6 散列大文件

IntersectionObserver+scrollIntoView实现电梯导航
电梯导航也被称为锚点导航，当点击锚点元素时，页面内相应标记的元素滚动到视口。而且页面内元素滚动时相应锚点也会高亮。电梯导航一般把锚点放在左右两侧，类似电梯一样。常见的电梯导航效果如下，比如一些官方文档
javascript - IntersectionObserver 去抖器
我正在使用IntersectionObserver polyfill在图 block 上延迟加载图像。问题是我有几千个图 block ，每个图 block 上都有一个需要延迟加载的图像。以前，我使用
javascript - IntersectionObserver 和高度未知的图像
我有一个包含许多方形图像(相同宽度和高度)的页面，其中大小由 width:50% 控制。他们将延迟加载使用 IntersectionObserver 的 lozad.js ( https://www.
javascript - 删除元素时是否应断开 IntersectionObserver
在单页应用程序中，元素经常被删除和替换。在从 DOM 中移除的元素上可能有一个 IntersectionObserver(或任何其他类型) 对于我从不关心的事件，因为它们是在目标上绑定(bind)和触
javascript - 将额外参数传递给 IntersectionObserver？
我如何将额外的参数传递给 IntersectionObserver？我正在尝试为 Vue 创建一个 lazyload 插件。它像这样工作正常，但我也希望能够调用提供的指令函数。 const lazyl
javascript - 如何使用 IntersectionObserver 使我的框只出现一次？
我创建了一个用户界面，当用户向下滚动页面时，会出现 4 个带有“淡入”效果的网格框，但是当我们向上滚动页面时，再次向下滚动页面时，动画再次出现，而准确地说，我不想让动画做多次，而只是在盒子出现一次时。
javascript - 如何使 IntersectionObserver 与变换平移动画一起使用？
我想为具有以下属性的元素创建动画: 它在时为元素设置动画它进入视口(viewport) 如果元素离开视口(viewport)然后再次进入它应该是再次动画根据滚动方向/相交边(从顶部或底部)，动画应
javascript - 如何使用 IntersectionObserver 初步检查元素是否相交
目标: 我想对一组在页面加载时相交的元素执行一个操作，并单独处理所有其他元素(当前未相交)。问题: 每个观察者都有自己的回调，我无法同步获得一组结果。可能的解决方案: 如果最初可以询问相交观察者元
reactjs - Gatsby - IntersectionObserver 未定义
我正在尝试构建我的 gatsby 项目，但由于 IntersectionObserver 未被识别，我无法构建。我在 InView 组件中使用了intersectionObserver: import
javascript - IntersectionObserver 方法不起作用 - Javascript
我有一个 div，我想在它滚动到视口(viewport)时更改颜色，我正在尝试使用新的 intersectionObserver 来实现这一点方法。我已经在配置回调中设置了我的参数，但我似乎无法让观察
mocking - Jest 模拟 IntersectionObserver
我有以下方法: componentDidLoad() { this.image = this.element.shadowRoot.querySelector('.lazy-i
javascript - 确定元素覆盖了多少视口(viewport)(IntersectionObserver)
我正在使用 IntersectionObserver在元素进入视口(viewport)时向元素添加和删除类。而不是说“当 X% 的元素可见时 - 添加此类”我想说“当 X% 的元素可见或当 X% 的
javascript - IntersectionObserver : how rootMargin work?
当目标元素距离交叉点根 100px 时，我想拦截一个交叉点为了做到这一点，我将 rootMargin 设置为“100px 0px 100px 0px”。在这个例子中，当目标元素的第一个像素(红色框
javascript - 强制 IntersectionObserver 更新
有什么方法可以强制更新/运行 IntersectionObserver实例？默认情况下，当视口(viewport)发生更改时，将执行回调。但是我正在寻找一种在其他事件发生时执行它的方法，比如元素的变化
javascript - IntersectionObserver rootMargin 的正负值不起作用
设置rootMargin的代码如下所示。 let observerOptions = { root: null, rootMargin: "100px", threshold:
javascript - 编写依赖于 `IntersectionObserver` 调用的测试
我正在尝试编写一个测试，当元素在视口(viewport)中时断言某些内容。我正在使用 IntersectionObserver API，事实证明，对观察者的调用是在浏览器可以进行时完成的。所以问题
javascript - 观察到元素后再次调用 IntersectionObserver 回调？
我正在观察消息并使用消息时间戳来跟踪这些观察结果。这些观察有一个重要条件:如果页面上没有客户端事件(光标不移动，或者他没有输入任何内容)，则跟踪时间戳不应更新。客户端经常收到新消息，但没有任何事件。这
javascript - 设置根元素时，IntersectionObserver 无法检测到交叉点
我有一个 IntersectionObserver 观察一个 img，当根设置为 null(视口(viewport))时它工作得很好。但是，当我将根元素设置为另一个 img 元素时，观察者无法检测到两
javascript - 调用外部阈值的 intersectionObserver 回调
试图理解 intersectionObserver API 中的一个怪癖。如果观察到的元素部分出现在屏幕上但未达到选项中定义的阈值，我希望回调不会触发，但它确实。试图了解为什么或如何在页面加载时阻止
javascript - Vue 设置 IntersectionObserver
我正在尝试为无限滚动列表设置一个 IntersectionObserver。我想检查 IntersectionObserver 是否已到达列表的最后一项。到目前为止，我的 IntersectionO

首页

博学

6Ren·AI

商城

javascript - 如果完全在 View 中(大于视口(viewport))，intersectionObserver 获得比率 1