交叉路口觀察者不觀察特定的 div/部分

Question

基本上，除了本節之外，我的路口觀察員在我設置他要觀察的所有元素上都能正常工作。 請幫忙

<section class="introduction-section mb-5 watch">

 // elements let elements_to_watch = document.querySelectorAll('.watch'); // callback let callback = (items) => { items.forEach((item) => { console.log(item.target.id); if (item.isIntersecting) { console.log("... now in"); item.target.classList.add("in-page"); } else { console.log("... now out"); item.target.classList.remove("in-page"); } }); } // observer let observer = new IntersectionObserver(callback, { threshold: 0.57 }); // apply elements_to_watch.forEach((element) => { observer.observe(element); });

 .introduction-section { background-color: var(--clr-dark); align-items: center; }.introduction-title-container { display: flex; flex-grow: 1; justify-content: center; align-items: center; height: 100vh; }.introduction-section.title { height: 100vh; font-size: calc(var(--fs-h2) * 1.2); color: var(--clr-light); text-align: center; max-width: 30rem; height: fit-content; margin-bottom: 0; top: 50%; left: calc(25% -20rem); position: fixed; transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1); opacity: 0; transform: scale(0.8); }.introduction-title-container.in-page.title { opacity: 1; transform: scale(1); }

 <section class="introduction-section mb-5 watch" id=section> <div class="row wrapper h-100 " id=wrapper> <div class="col-12 px-0 introduction-title-container watch" id=introduction1> <h2 class="title"> A SmartWatch is born that goes beyond all limits. </h2> </div> <div class="col-12 px-0 introduction-title-container watch" id=introduction2> <h2 class="title">For Athletes who challenge the impossible.</h2> </div> <div class="col-12 px-0 introduction-title-container watch" id=introduction3> <h2 class="title">The call to the Adventure begins.</h2> </div> </div> </section>

它應該將 class“watch”更改為“in-page”，但由於某些原因，在本節中它不會這樣做。

正如我所說，手表 class 在 col-12 div 上發生了變化，但在部分上沒有變化，而且在行上也沒有變化，因為我試過了。

我有控制台在 JS 中記錄了 elements_to_watch 節點列表並且該部分在那里所以我不明白為什么它不起作用......

Answer 1

我想我知道你想要達到什么目的。 正如您所說，每次您的Intersection observer器經過頁面的特定部分時，您都希望刪除.watch class 。 我通過刪除.watch並添加.in-page來測試代碼，反之亦然。

打開您的 Google Chrome Elements 並觀察 DOM 的變化，同時您導航進出指定的部分。 您會注意到在具有.watch class 的特定部分中類發生了變化。

行部分不會更改，因為您並未真正對其應用 class .watch 。 您只選擇具有 class 手表的 DOM 元素。 我將 class 添加到每個元素中，它工作正常。 我希望能給你一個提示。

 // elements let elements_to_watch = document.querySelectorAll('.watch'); // callback let callback = (items) => { console.log(items[0].target.id); items.forEach((item) => { if (item.isIntersecting) { console.log("... now in"); item.target.classList.remove("watch"); item.target.classList.add("in-page"); } else { console.log("... now out"); item.target.classList.add("watch"); item.target.classList.remove("in-page"); } }); } // observer let observer = new IntersectionObserver(callback, { threshold: 0.57 }); // apply elements_to_watch.forEach((element) => { observer.observe(element); });

 <section class="introduction-section mb-5 watch" id=section> <div class="row wrapper h-100 watch" id=wrapper> <div class="col-12 px-0 introduction-title-container watch" id=introduction1> <h2 class="title watch"> A SmartWatch is born that goes beyond all limits. </h2> </div> <div class="col-12 px-0 introduction-title-container watch" id=introduction2> <h2 class="title watch">For Athletes who challenge the impossible.</h2> </div> <div class="col-12 px-0 introduction-title-container watch" id=introduction3> <h2 class="title watch">The call to the Adventure begins.</h2> </div> </div> </section>

Answer 2

好的，我現在看到了添加的 CSS 的問題。我不完全理解為什么，但是對於“介紹”元素的花式 CSS，容器（ <section>更大。因此，得到它的 57%進入視口需要更大的視口。

我不知道你到底想做什么，但如果你從<section>中取出“watch” class ，然后用更小的閾值（比如 0.20）創建一個新的IntersectionObserver也許），並與該觀察者一起觀察該部分（使用相同的回調）。

因此，從<section>中刪除“watch”后，JavaScript 將是：

// observer for each heading
let observer = new IntersectionObserver(callback, {
  threshold: 0.57
});
// apply
elements_to_watch.forEach((element) => {
  observer.observe(element);
});
// observer for section container
observer = new IntersectionObserver(callback, {
  threshold: 0.20
});
observer.observe(document.getElementById("section"));