如果分配的介质在视口中，如何将类添加到链接中

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>
<section id="cats">
<article class="media">
<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">
</article>
</section>
<section id="food">
<article class="media">
<img src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg">
</article>
<article class="media">
<img src="https://theculturetrip.com/wp-content/uploads/2017/07/3566479001_c9707436f9_b.jpg">
</article>
</section>
</div>

总的来说，它是有效的。但是：如果您在右侧区域滚动，.active链接应该会自动更新。因此，例如，如果滚动到#food部分，则对应的链接应该是.active。

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

有人能帮帮我吗？我会非常感激的<3<3<3

Answer 1

我认为IntersectionObserver非常适合您的需求。这怎么符合你的需要？

// Click Function
$('body').on('click', 'a', function() {
$('a.active').removeClass('active');
$(this).addClass('active');
});

// Scroll Function
const mediaInViewport = document.querySelectorAll('.media');
observer = new IntersectionObserver((entries, observer) => {
console.log('Next Media in Viewport');
entries.forEach((entry) => {
if (entry.target && entry.isIntersecting) {
entry.target.classList.add('active');

const closestParent = entry.target.closest('section');
if (closestParent) {
const selector = closestParent.id;
const links = document.querySelectorAll('.link');
for (const link of links) {
const split = link.href.split('#');
if (split.length >= 2) {
const local = split[1];
if (local === selector) {
link.classList.add('active');
}
}
}
}
} 
});
}, {threshold: 0.7 } );
window.addEventListener('DOMContentLoaded', () => {
setTimeout( // Wait for images to fully load
() => {
mediaInViewport.forEach((item) => {
observer.observe(item);
});
}
, 1000);
});

* {
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="#landscape">Landscapes</a>
<a class="link" href="#cats">Cats</a>
<a class="link" href="#food">Food</a>
</div>
<div id="right">
<section id="landscape">
<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>
<section id="cats">
<article class="media">
<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">
</article>
</section>
<section id="food">
<article class="media food">
<img src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg">
</article>
<article class="media food">
<img src="https://theculturetrip.com/wp-content/uploads/2017/07/3566479001_c9707436f9_b.jpg">
</article>
</section>