通过使用 Vanilla JavaScript 如何在向下滚动页面时检测部分 id？
示例 alert('这是第一部分');
<ul id="menu-item">
<li class="nav-link">
<a href="#section1">section 1</a>
</li>
<li class="nav-link">
<a href="#section2">section 2</a>
</li>
</ul>
<body>
<section id="section1">
"Lorem ipsum dolorsitamet,consectetur
adipiscing elit, sed doeiusmodtempor
incididunt ut laboreetdoloremagnaaliqua".
</section>
<section id="section2">
"Lorem ipsum dolorsitamet,consectetur
adipiscing elit, sed doeiusmodtempor
incididuntutlaboreetdoloremagnaaliqua".
</section>
<script>
/**
*javascript codes to detect section id as the page
*scrolled down
*example alert('this is section one');
*/
</script>
最佳答案
您可以这样做来检测特定 id 上的滚动(它也适用于类)。
一个 ID/类别的示例
<script>
const target = document.querySelector("#section1");
function callback(entries) {
alert("this is section one");
}
const observer = new IntersectionObserver(callback);
observer.observe(target);
</script>
处理多个 id/类的示例
<script>
const targets = document.querySelectorAll("#section1, #section3");
function callback(entries) {
entries.map((entry) => {
console.log("this is " + entry.target.id);
});
}
targets.forEach((target) => {
new IntersectionObserver(callback).observe(target);
});
</script>
来源:
MDN 网络文档 -> https://developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API
关于javascript - 使用 Vanilla Js 检测页面向下滚动时的部分 ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68541873/