如何解决如何从nodeList查找节点的索引
我正在尝试构建一个导航，其中nav__link使用interSectionObserver滚动显示用户当前所在的部分。
所以我尝试从entry.target到console.log（）索引sectionArr。这样一来，我可以查询选择所有.nav_link并可以将active类添加到该index号中。
我这样做是因为很容易将nav_link定位为添加类，而不是在每个id和{{1}上分别添加classes或nav__link }。
我尝试搜索此内容，但未找到任何相关内容。我认为，可以从section也是element的成员的array中找到element的索引。
谢谢。
arrayconst 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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。