个人中心
gpt4 book ai didi

javascript - 如何使 Intersection Observer 复制引导滚动 spy 行为

转载 作者：行者123 更新时间：2023-11-28 03:16:51 27 4
gpt4 key购买 nike

我正在构建一个 blazor 应用程序，我应该将 java 脚本代码保持在最少水平。所以我在视差页面中仅使用 bootstrap css。我已经使类似于滚动 spy 的行为与 window.onscroll 一起使用，因为目前还无法使用 c# 来完成；但它的性能很差。

经过谷歌搜索，我最近发现了 IntersectionObserver API。因此我考虑让现有的 window.onscroll 逻辑与 IntersectionObserver API 配合使用。但是我无法实现它。

这就是我正在尝试做的事情。在具有固定顶部导航栏的视差页面中，当用户滚动到达他想要查看的相应部分时，我想将 active css 类应用于 a.nav-items .

这是 HTML:

<body data-spy="scroll" data-target=".site-nav" data-offset="55">

  <header id="page-hero" class="site-header d-flex flex-column align-content-between">

    <nav class="site-nav family-sans navbar navbar-expand-md navbar-dark fixed-top">
      <div class="container-fluid">

        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="myTogglerNav"
          aria-label="Toggle Navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <a class="navbar-brand text-uppercase" href="#page-hero">
          <i class="fas fa-cube mr-2"></i> Layout Components</a>

        <div class="collapse navbar-collapse" id="myTogglerNav">
          <div class="navbar-nav ml-auto font-weight-regular text-uppercase">
            <a class="nav-item nav-link" href="#page-hero">home</a>
            <a class="nav-item nav-link" href="#page-multicolumn">columns</a>
            <a class="nav-item nav-link" href="#page-media">media</a>
            <a class="nav-item nav-link" href="#page-photogrid">grid</a>
            <a class="nav-item nav-link" href="#page-carousel">carousel</a>
            <a class="nav-item nav-link" href="#page-nested">nested</a>
            <a class="nav-item nav-link" href="#page-icons">icons</a>
            <a class="nav-item nav-link" href="#page-floater">floater</a>
            <a class="nav-item nav-link" href="#page-cards">cards</a>
          </div>
        </div>

      </div>
    </nav>

    <section class="layout-hero jumbotron jumbotron-fluid d-flex align-items-center mt-5 text-reverse">
      <div class="container text-center">
......
......
......

    <article id="page-multicolumn" class="page-section vertical-padding">

    <header class="page-section-header container">
.....
.....
.....

    <article id="page-media" class="page-section vertical-padding">

    <header class="page-section-header container text-center">
....

我有 article 标签，其 id 与顶部 .nav-item 中 a 的 href 相匹配。我只粘贴了一些 html，因为所有文章标签的骨架都是相同的。

这是我现有的window.onscroll:

var sections = {};

document.querySelectorAll(".page-section,.site-header").forEach(section => sections[section.id] = section.offsetTop);

window.onscroll = function () {
    document.querySelector('header nav').classList.toggle('inbody', document.documentElement.scrollTop > 380);
    document.querySelector('#page-media .layout-animation').style['visibility'] = 'hidden';

    var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;

    Object.keys(sections).forEach(key => {
        if (sections[key] <= scrollPosition + 55) {
            document.querySelectorAll('a.nav-item').forEach(a => a.classList.remove('active'));
            document.querySelector('a[href="#' + key + '"]').classList.add('active');

            if (key === 'page-media') {
                document.querySelector('#page-media .layout-animation').classList.add('animated', 'fadeInRight');
            }
        }
    });
};

上面的代码有效。但我想使用正确的 API。

这是我的IntersectionObserver:

if (window.IntersectionObserver) {
    let observer = new IntersectionObserver(
        (entries, observer) => {
            console.log(entries);
            entries.forEach(entry => {
                /* Here's where we deal with every intersection */
                document.querySelectorAll('a.nav-item').forEach(a => a.classList.remove('active'));
                if (entry.isIntersecting) {
                    document.querySelector('header nav').classList.toggle('inbody', entry.target.id !== 'page-hero');
                    document.querySelector('#page-media .layout-animation').style['visibility'] = 'hidden';
                    document.querySelector('a[href="#' + entry.target.id + '"]').classList.add('active');
                    if (entry.target.id === 'page-media') {
                        document.querySelector('#page-media .layout-animation').classList.add('animated', 'fadeInRight');
                    }
                }
            });
        }, { root: document.querySelector('.site-nav'), rootMargin: "0px", threshold: 0 });
    document.querySelectorAll('.page-section,.site-header').forEach(section => observer.observe(section));
}

但是我的交叉口观察器不起作用。我厌倦了使用 console.log(entry) 来查看会发生什么。所有条目仅在页面加载时记录，之后不再工作。有错误的地方请帮忙指正。

最佳答案

这里的代码不起作用的原因是它在错误的时间运行。调用document.querySelectorAll('.page-section,.site-header')需要在这些元素渲染到 DOM 后执行，否则它不会匹配任何内容。

这是我如何让它工作的，我对函数进行了一些调整，如下所示，

function highlightMenu() {
    const sections = document.querySelectorAll('.page-section,.site-header');
    const config = {
        rootMargin: '-55px 0px -85%'
    };

    let observer = new IntersectionObserver(function
        (entries, self) {

        entries.forEach(entry => {
            if (entry.isIntersecting) {
                intersectionHandler(entry);
            }
        });
    }, config);

    sections.forEach(section => observer.observe(section));
}

function intersectionHandler(entry) {
    const id = entry.target.id;
    document.querySelector('header nav').classList.toggle('inbody', id !== 'page-hero');
    if (id === 'page-media') {
        document.querySelector('#page-media .layout-animation').classList.add('animated', 'fadeInRight');
    }

    const currentlyActive = document.querySelector('nav a.nav-item.active');
    const shouldBeActive = document.querySelector('nav a.nav-item[href="#' + id + '"]');

    if (currentlyActive) {
        currentlyActive.classList.remove('active');
    }
    if (shouldBeActive) {
        shouldBeActive.classList.add('active');
    }
}

并从我的组件内部调用 OnAfterRenderAsync在 blazor 中使用 JS 互操作，

@code{

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("highlightMenu");
        }
    }

}

关于javascript - 如何使 Intersection Observer 复制引导滚动 spy 行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59553761/

27 4 0
文章推荐： javascript - 使用 Cocoon Rails 动态生成嵌套形式
文章推荐： html - 当顶部 div 改变高度时底部 div 不移动
文章推荐： c++ - 使用 cgal 进行增量空间搜索时修改仿函数变量
文章推荐： javascript - 如何将 jQuery ng-repeat {{x.something}} 传递给 javascript api url，如/api/get_now/{{x.something}}
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com