如果分配的媒体位于视口中，如何将类添加到链接？

Question

我编码如下：

// Click Function

$('body').on('click', 'a', function() {

  $('a.active').removeClass('active');

  $(this).addClass('active');

});

// Scroll Function

const sectionIsInViewport = document.querySelector('section');

observer = new IntersectionObserver((callback) => {

  console.log('This section is now in the viewport.');

});

observer.observe(sectionIsInViewport);

* {

  margin: 0;

  padding: 0;

  font-family: sans-serif;

  font-size: 30px;

  text-decoration: none;

  color: inherit;

}

body {

  display: flex;

  cursor: default;

}

#left,

#right {

  width: 50%;

  height: 100vh;

  overflow-y: scroll;

  scroll-behavior: smooth;

}

#left {

  background-color: rgb(220, 220, 220);

}

#right {

  background-color: rgb(200, 200, 200);

}

.media {

  padding: 10px;

  padding-bottom: 0;

}

.media:nth-last-child(1) {

  margin-bottom: 10px;

}

img {

  display: block;

  width: 100%;

}

.link {

  cursor: pointer;

}

.active {

  background-color: black;

  color: white;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="left">

  <a class="link active" href="#landscapes">Landscapes</a>

  <a class="link" href="#cats">Cats</a>

  <a class="link" href="#food">Food</a>

</div>

<div id="right">

  <section id="landscapes">

    <article class="media">

      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">

    </article>

    <article class="media">

      <img src="https://i.pinimg.com/originals/ae/99/54/ae995473d0b73efd9b32b5cd029d9396.jpg">

    </article>

    <div class="media">

      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Rural_landscape.JPG/1200px-Rural_landscape.JPG">

    </div>

    <article class="media">

      <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">

    </article>

  </section>

一般来说，它有效。但是：如果您滚动到正确的区域，.active链接应该会自动更新。因此，如果您滚动到该部分#food，则相应的链接应该是.active。

我尝试使用 Intersection Observer，但我不确定它是否是最好的工具。使用 React 有意义吗？如果是，为什么？

有人可以帮我吗？会非常感激。<3<3<3

Answer 1

我认为 IntersectionObserver 非常适合您的需求。这如何满足您的需求？// Click Function$('body').on('click', 'a', function() {&nbsp; $('a.active').removeClass('active');&nbsp; $(this).addClass('active');});// Scroll Functionconst mediaInViewport = document.querySelectorAll('.media');observer = new IntersectionObserver((entries, observer) => {&nbsp; console.log('Next Media in Viewport');&nbsp; entries.forEach((entry) => {&nbsp; &nbsp; if (entry.target && entry.isIntersecting) {&nbsp; &nbsp; &nbsp; entry.target.classList.add('active');&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; const closestParent = entry.target.closest('section');&nbsp; &nbsp; &nbsp; if (closestParent) {&nbsp; &nbsp; &nbsp; &nbsp; const selector = closestParent.id;&nbsp; &nbsp; &nbsp; &nbsp; const links = document.querySelectorAll('.link');&nbsp; &nbsp; &nbsp; &nbsp; for (const link of links) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const split = link.href.split('#');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (split.length >= 2) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const local = split[1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (local === selector) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; link.classList.add('active');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp;&nbsp; });}, {threshold: 0.7 } );window.addEventListener('DOMContentLoaded', () => {&nbsp; setTimeout( // Wait for images to fully load&nbsp; &nbsp; &nbsp; () => {&nbsp; &nbsp; &nbsp; mediaInViewport.forEach((item) => {&nbsp; &nbsp; &nbsp; &nbsp; observer.observe(item);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; , 1000);});* {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; font-family: sans-serif;&nbsp; font-size: 30px;&nbsp; text-decoration: none;&nbsp; color: inherit;}body {&nbsp; display: flex;&nbsp; cursor: default;}#left,#right {&nbsp; width: 50%;&nbsp; height: 100vh;&nbsp; overflow-y: scroll;&nbsp; scroll-behavior: smooth;}#left {&nbsp; background-color: rgb(220, 220, 220);}#right {&nbsp; background-color: rgb(200, 200, 200);}.media {&nbsp; padding: 10px;&nbsp; padding-bottom: 0;}.media:nth-last-child(1) {&nbsp; margin-bottom: 10px;}img {&nbsp; display: block;&nbsp; width: 100%;}.link {&nbsp; cursor: pointer;}.active {&nbsp; background-color: black;&nbsp; color: white;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="left">&nbsp; <a class="link active" href="#landscape">Landscapes</a>&nbsp; <a class="link" href="#cats">Cats</a>&nbsp; <a class="link" href="#food">Food</a></div><div id="right">&nbsp; <section id="landscape">&nbsp; &nbsp; <article class="media">&nbsp; &nbsp; &nbsp; <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">&nbsp; &nbsp; </article>&nbsp; &nbsp; <article class="media">&nbsp; &nbsp; &nbsp; <img src="https://i.pinimg.com/originals/ae/99/54/ae995473d0b73efd9b32b5cd029d9396.jpg">&nbsp; &nbsp; </article>&nbsp; &nbsp; <div class="media">&nbsp; &nbsp; &nbsp; <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Rural_landscape.JPG/1200px-Rural_landscape.JPG">&nbsp; &nbsp; </div>&nbsp; &nbsp; <article class="media">&nbsp; &nbsp; &nbsp; <img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">&nbsp; &nbsp; </article>&nbsp; </section>&nbsp; <section id="cats">&nbsp; &nbsp; <article class="media">&nbsp; &nbsp; &nbsp; <img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg">&nbsp; &nbsp; </article>&nbsp; </section>&nbsp; <section id="food">&nbsp; &nbsp; <article class="media food">&nbsp; &nbsp; &nbsp; <img src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg">&nbsp; &nbsp; </article>&nbsp; &nbsp; <article class="media food">&nbsp; &nbsp; &nbsp; <img src="https://theculturetrip.com/wp-content/uploads/2017/07/3566479001_c9707436f9_b.jpg">&nbsp; &nbsp; </article>&nbsp; </section>