正確的交叉點觀察器集

Question

目前我被困在交叉點觀察者的正確設置上。 我會說它的工作原理是一半，但它仍然沒有理想的行為。

我的目標是制作響應當前觀察到的部分的交互式菜單。 我想在新部分可見時立即觸發回調 function（突出顯示菜單中的特定鏈接），即使它很小，比如 1 厘米。

現在它可以工作，直到我放大字體，例如到 25px。 您可以嘗試刪除此樣式。 當一節中的文本過多時，Tt 也會停止工作。

section{
  font-size:25px;
} 

我認為，這就是問題所在。閾值或條件本身。

const myObserver = new IntersectionObserver(elements => {
  if (elements[0].intersectionRatio == 1) {
    highlight(elements[0].target);
  }
}, {threshold: 1.0})

如果有人知道是什么問題，請幫助我。 我整天都被困在這上面。 謝謝 ！

在這里寫代碼

 //Get all sections const sections = document.querySelectorAll('section'); //Get all links in menu const menu = document.querySelector('.menu'); const links = menu.querySelectorAll('a'); //Callback function function highlight(target){ links.forEach(link => { link.classList.remove('active') if(link.getAttribute('href') === '#'+target.id){ link.classList.add('active'); } }) } const myObserver = new IntersectionObserver(elements => { if (elements[0].intersectionRatio == 1) { highlight(elements[0].target); } }, {threshold: 1.0}) //Observe every function sections.forEach(el => myObserver.observe(el));

 .menu{ position:fixed; top:0; left:0; width:30%; background:grey; height:100%; } ul{ list-style:none; } a{ text-decoration:none; color:black; font-size:20px; } main{ width:70%; margin-left:30%; } /*Try to remove this font-size style, to see what I was explaining*/ section{ font-size:25px; }.active{ color:red; }

 <div class="menu"> <ul> <li><a href="#1">Section 1</a></li> <li><a href="#2">Section 2</a></li> <li><a href="#3">Section 3</a></li> </ul> </div> <main> <section id="1"> <h1>Section 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum. In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim. adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum. In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim.</p> </section> <section id="2"> <h1>Section 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum. In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim. adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum. In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim.</p> </section> <section id="3"> <h1>Section 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum. In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim. adipiscing elit. Nunc viverra est elit, eu eleifend dolor elementum non. Nunc imperdiet sagittis augue ac varius. Donec condimentum id erat sed ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi suscipit lectus id purus bibendum, a cursus metus mollis. Mauris elementum malesuada massa non lobortis. Quisque molestie convallis dictum. Curabitur sodales erat finibus nunc mattis congue. Morbi eleifend sed lectus id ultrices. Vivamus varius felis viverra turpis eleifend auctor. Duis aliquet magna ut diam lacinia, non iaculis nulla sagittis. Praesent fringilla ex augue, quis hendrerit arcu facilisis a. Fusce iaculis bibendum orci eu efficitur. Praesent tincidunt nisl a urna posuere, venenatis dapibus leo ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec pretium tristique enim in molestie. Fusce lacinia, enim nec bibendum dignissim, nibh nulla laoreet nisl, eget finibus augue eros eu urna. Suspendisse accumsan velit orci, non semper lacus aliquam at. Morbi semper porta eros, sed dignissim nunc auctor et. Vivamus mattis fringilla enim. Nulla pretium at neque at feugiat. Pellentesque dictum id massa nec accumsan. Etiam lectus elit, elementum at velit sit amet, tristique pellentesque sapien. Aliquam eu nisl ac est posuere imperdiet. Proin eu enim quis arcu aliquam consequat a vitae purus. Sed finibus scelerisque risus pretium faucibus. Integer eget nisl eu magna sodales rutrum. In hac habitasse platea dictumst. Duis eget fringilla tortor. Aliquam eget magna rutrum ex pharetra vulputate. Integer in ex est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed consectetur urna odio, sit amet pretium tortor sodales et. Donec molestie bibendum diam, a volutpat urna bibendum sit amet. Fusce congue est imperdiet, lacinia diam non, tempor dui. Integer iaculis lobortis neque id malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Phasellus vestibulum diam fringilla turpis tempor interdum. Maecenas egestas fringilla risus id elementum. Cras condimentum turpis et elit lobortis dignissim.</p> </section> </main>

Answer 1

目標是在至少部分相關部分可見時突出顯示菜單項。

MDN 給出了這個：

目標元素與其根的交叉度就是交叉比。 這是目標元素的百分比表示，它以 0.0 和 1.0 之間的值可見。

然而，在給定的代碼中，閾值設置為 1

const myObserver = new IntersectionObserver(elements => {
  if (elements[0].intersectionRatio == 1) {
    highlight(elements[0].target);
  }
}, {threshold: 1.0})

這意味着所有部分都必須可見，才能進行觀察。 當字體大小增加，或者該部分中有很多文本時，不會發生這種情況，因此不會發生觀察。

如果沒有設置閾值選項，則觀察將在該部分進入視野后立即發生，這似乎更接近所需的部分。 所以首先要嘗試的是這段代碼：

const myObserver = new IntersectionObserver(elements => {
  if (elements[0].intersectionRatio == 1) {
    highlight(elements[0].target);
  }
})

還需要考慮當兩個或更多部分部分可見時需要什么，如果兩個觀察同時觸發怎么辦？ 如果處理了所有觀察到的元素（即在該元素集合中），尤其是檢查它們是否有交集，則上述代碼將更加健壯。 我想如果他們不在視圖中，你想清除他們的菜單項的突出顯示，如果有交叉點則設置它。

請參閱https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API以獲得更完整的解釋和一段代碼，該代碼段將逐步執行所有觀察到的元素。