如何从nodeList查找节点的索引

问题描述

我正在尝试构建一个导航，其中nav__link使用interSectionObserver滚动显示用户当前所在的部分。

所以我尝试从entry.target到console.log（）索引sectionArr。这样一来，我可以查询选择所有.nav_link并可以将active类添加到该index号中。

我这样做是因为很容易将nav_link定位为添加类，而不是在每个id和{{1}上分别添加classes或nav__link }。

我尝试搜索此内容，但未找到任何相关内容。我认为，可以从section也是element的成员的array中找到element的索引。

谢谢。

array

const firstSection = document.querySelector('.section--first');
const sectionArr = [...document.querySelectorAll('section')];
const sideBarLinks = document.querySelectorAll('.sidebar__link');


let observer = new IntersectionObserver(detectInterSection);

observer.observe(firstSection)


function detectInterSection(entries) {
    entries.forEach(entry => {
        console.log(entry.target)
        // console.log(sectionArr.findIndex(entry.target)); // trying to console log the index of entry.target in sectioArr
    })
}

* {
  box-sizing: border-box;
}

*,*:before,*:after {
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

*,*:after {
  box-sizing: border-box;
}

ul,ol {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  font-family: "Nunito",sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}

.header {
  padding: 4rem 0;
  background: #333;
}

.footer {
  background: #333;
  padding: 30px 0;
}

section {
  font-size: 24px;
  background: #b78ee6;
  height: 48vh;
  padding: 80px 0;
}

section:nth-child(even) {
  background: #333e48;
  height: 90vh;
}

.scroll-wrapper {
  height: 100vh;
  position: fixed;
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  width: 12px;
  z-index: 99;
  cursor: -webkit-grab;
}
.scroll-wrapper .scroll-thumb-wrapper {
  height: 100vh;
  position: relative;
  width: 100%;
}
.scroll-wrapper .scroll-thumb {
  width: 16px;
  background: #666;
  will-change: top;
  position: absolute;
  left: 0;
  top: 0;
}
.intersection {
  position: fixed;
  background: #333;
  width: 300px;
  right: 32px;
  top: 0;
  padding: 32px;
  z-index: 88;
  border-radius: 10px;
  top: 200px;
}
.intersection a {
  color: #fff;
}

.content {
  position: relative;
}

.is--active {
  color: #b78ee6;
}

解决方法

Array.findIndex()以函数作为参数来查找元素。

const firstSection = document.querySelector('.section--first');
const sectionArr = [...document.querySelectorAll('section')];
const sideBarLinks = document.querySelectorAll('.sidebar__link');


let observer = new IntersectionObserver(detectInterSection);

observer.observe(firstSection)


function detectInterSection(entries) {
    entries.forEach(entry => {
        const targetSectionIndex = sectionArr.findIndex(section => entry.target.id === section.id); 
        console.log('targetSectionIndex',targetSectionIndex);
        const targetSection = sectionArr[targetSectionIndex];
        console.log('targetSection',targetSection);
    })
}

* {
  box-sizing: border-box;
}

*,*:before,*:after {
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

*,*:after {
  box-sizing: border-box;
}

ul,ol {
  list-style: none;
}

a {
  text-decoration: none;
}

body {
  font-family: "Nunito",sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
  background: #FF0000;
}

.header {
  padding: 4rem 0;
  background: #333;
}

.footer {
  background: #333;
  padding: 30px 0;
}

section {
  font-size: 24px;
  background: #b78ee6;
  height: 48vh;
  padding: 80px 0;
}

section:nth-child(even) {
  background: #333e48;
  height: 90vh;
}

.scroll-wrapper {
  height: 100vh;
  position: fixed;
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  width: 12px;
  z-index: 99;
  cursor: -webkit-grab;
}
.scroll-wrapper .scroll-thumb-wrapper {
  height: 100vh;
  position: relative;
  width: 100%;
}
.scroll-wrapper .scroll-thumb {
  width: 16px;
  background: #666;
  will-change: top;
  position: absolute;
  left: 0;
  top: 0;
}
.intersection {
  position: fixed;
  background: #333;
  width: 300px;
  right: 32px;
  top: 0;
  padding: 32px;
  z-index: 88;
  border-radius: 10px;
  top: 200px;
}
.intersection a {
  color: #fff;
}

.content {
  position: relative;
}

.is--active {
  color: #b78ee6;
}

<div class="scroll-wrapper">
    <div class="scroll-thumb-wrapper">
        <div class="scroll-thumb"></div>
    </div>
</div>
<header class="header">
    <div class="container">
        header
    </div>
</header>
<main class="content">
    <aside class="intersection">
        <ul>
              <li><a href="javascript:void(0)" class="sidebar__link">first</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">second</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">third</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">fourth</a></li>
            <li><a href="javascript:void(0)" class="sidebar__link">fiveth</a></li>
        </ul>
    </aside>
    <section class="section section--first" style="position: relative">
        <div class="container">
            first seciton
        </div>
    </section>
    <section id="apple " class="section">
        <div class="container">
            second seciton
        </div>
    </section>
    <section class="section">
        <div class="container">

            third seciton
        </div>
    </section>
    <section class="section">
        <div class="container">
            fourth seciton
        </div>
    </section>
    <section id="section" class="section">
        <div class="container">
            fifeth seciton
        </div>
    </section>
    <section class="section">
        <div class="container">
            last seciton
        </div>
    </section>
</main>
<footer class="footer">
    <div class="container"> footer</div>
</footer>